Skip to content

Instantly share code, notes, and snippets.

@duairc
Last active August 29, 2015 14:06
Show Gist options
  • Save duairc/03b500d49dcb18f11825 to your computer and use it in GitHub Desktop.
Save duairc/03b500d49dcb18f11825 to your computer and use it in GitHub Desktop.
SCSS selectors for the first and last row of a table
// http://www.w3.org/TR/html5/tabular-data.html#the-table-element
@mixin first-row() {
& >,
> thead >,
> tbody:first-child >,
> caption:first-child + tbody >,
> caption:first-child ~ colgroup + tbody >,
> colgroup:first-child + tbody >,
> colgroup:first-child ~ colgroup + tbody >,
> caption:first-child +,
> caption:first-child ~ colgroup +,
> colgroup:first-child +,
> colgroup:first-child ~ colgroup +,
> caption:first-child + tfoot:last-child >,
> caption:first-child ~ colgroup + tfoot:last-child >,
> colgroup:first-child + tfoot:last-child >,
> colgroup:first-child ~ colgroup + tfoot:last-child > {
tr:first-child > {
@content;
}
}
}
@mixin last-row() {
> tfoot >,
> caption:first-child + tbody:last-child >,
> caption:first-child ~ colgroup + tbody:last-child >,
> caption:first-child ~ thead + tbody:last-child >,
> caption:first-child + tbody ~ tbody:last-child >,
> caption:first-child ~ colgroup + tbody ~ tbody:last-child >,
> caption:first-child ~ thead + tbody ~ tbody:last-child >,
> colgroup:first-child + tbody:last-child >,
> colgroup:first-child ~ colgroup + tbody:last-child >,
> colgroup:first-child ~ thead + tbody:last-child >,
> colgroup:first-child + tbody ~ tbody:last-child >,
> colgroup:first-child ~ colgroup + tbody ~ tbody:last-child >,
> colgroup:first-child ~ thead + tbody ~ tbody:last-child >,
> thead:first-child + tbody:last-child >,
> thead:first-child + tbody ~ tbody:last-child >,
> tbody:first-child ~ tbody:last-child >,
> tbody:first-child:last-child >,
> caption:first-child +,
> caption:first-child ~ colgroup +,
> caption:first-child ~ thead +,
> caption:first-child + tr ~,
> caption:first-child ~ colgroup + tr ~,
> caption:first-child ~ thead + tr ~,
> colgroup:first-child +,
> colgroup:first-child ~ colgroup +,
> colgroup:first-child ~ thead +,
> colgroup:first-child + tr ~,
> colgroup:first-child ~ colgroup + tr ~,
> colgroup:first-child ~ thead + tr ~,
> thead:first-child +,
> thead:first-child + tr ~,
> tr:first-child ~ {
tr:last-child > {
@content;
}
}
> tr:first-child:last-child {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment