css - Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? -

css - Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? -

is there way select every nth kid that matches (or not match) arbitrary selector? example, want select every odd table row, within subset of rows:

class="lang-css prettyprint-override">table.myclass tr.row:nth-child(odd) { ... } class="lang-html prettyprint-override"><table class="myclass"> <tr> <td>row <tr class="row"> <!-- want --> <td>row <tr class="row"> <td>row <tr class="row"> <!-- , --> <td>row </table>

but :nth-child() seems count tr elements regardless of whether or not they're of "row" class, end 1 even "row" element instead of 2 i'm looking for. same thing happens :nth-of-type().

can explain why?

this mutual problem arises due misunderstanding of how :nth-child() , :nth-of-type() work. unfortunately, there no selector-based solution yet because selectors not provide way match nth kid matches arbitrary selector based on pattern such odd-numbered, even-numbered or an+b a != 1 , b != 0. extends beyond class selectors, attribute selectors, negations, , more complex combinations of simple selectors.

the :nth-child() pseudo-class counts elements among all of siblings under same parent. not count siblings match rest of selector. similarly, :nth-of-type() pseudo-class counts siblings sharing same element type, refers tag name in html, , not rest of selector.

this means if children of same parent of same element type, illustration in case of table body children tr elements or list element children li elements, :nth-child() , :nth-of-type() behave identically, i.e. every value of an+b, :nth-child(an+b) , :nth-of-type(an+b) match same set of elements.

in fact, simple selectors in given compound selector, including pseudo-classes such :nth-child() , :not(), work independently of 1 another, rather looking @ subset of elements matched rest of selector.

this implies there no notion of order among simple selectors within each individual compound selector1, means illustration next 2 selectors equivalent:

table.myclass tr.row:nth-child(odd) table.myclass tr:nth-child(odd).row

translated english, both mean:

select tr element matches of next independent conditions:

it odd-numbered kid of parent; it has class "row"; and it descendant of table element has class "myclass".

(you'll notice utilize of unordered list here, drive point home)

because there no pure css solution, you'll have utilize script filter elements , apply styles or class names accordingly.

for example, next mutual workaround using jquery (assuming there 1 row grouping populated tr elements within table):

$('table.myclass').each(function() { // note that, confusingly, jquery's filter pseudos 0-indexed // while css :nth-child() 1-indexed $('tr.row:even').addclass('odd'); });

with corresponding css:

table.myclass tr.row.odd { ... }

other solutions using different technologies left exercise reader; brief, contrived illustration illustration.

for it's worth, there proposal an extension :nth-child() notation added selectors level 4 specific purpose of selecting every nth kid matching given selector.2

the selector filter matches provided argument :nth-child(), 1 time again due how selectors operate independently of 1 in sequence dictated existing selector syntax. in case, this:

table.myclass tr:nth-child(odd of .row)

(an astute reader note right away ought :nth-child(odd of tr.row) instead, since simple selectors tr , :nth-child() operate independently of 1 well. 1 of problems functional pseudo-classes take selectors, can of worms i'd rather not open in middle of answer. instead i'm going go assumption sites not have other elements tr elements siblings of 1 in table body, create either alternative functionally equivalent.)

of course, beingness brand new proposal in brand new specification, won't see implementation until few years downwards road. in meantime, you'll have stick using script, above.

1 if specify type or universal selector, must come first. not alter how selectors fundamentally work, however; it's nil more syntactic quirk.

2 this proposed :nth-match(), because still counts element relative siblings, , not every other element matches given selector, has since of 2014 been repurposed extension existing :nth-child() instead.

css css3 css-selectors