Why is my second :nth-child selector taking priority?

Question

I have a question about :nth-child() in css.

When I have an HTML structure like this:

<div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

And my CSS looks like this:

div.parent div.child:nth-child(3n) {
  background-color: yellow;
}

div.parent div.child:nth-child(2n) {
  background-color: white;
}

It seems like the second (last) instruction is winning. Is that the case in every environment like this?

Here is a JSFiddle containing this example two times with the CSS part switched.

Yes, latter selectors always take precedence over earlier selectors, unless the earlier are [more specific](https://developer.mozilla.org/en/docs/Web/CSS/Specificity) or a style within that selection is given the `!important` rule. — George, Mar 10 '16 at 13:38
Not exactly a duplicate, but read up on this question: http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css — TylerH, Mar 10 '16 at 14:50

score 5 · Accepted Answer · answered Mar 10 '16 at 13:36

5

You have to remember CSS styles will ALWAYS cascade (unless flagged !important).

So, you have every 3rd child and every 2nd child, but when these equal the same child (6, 12) so on, the LAST style will always be the style applied.

You can expect this result on any browser.

More reading: http://www.htmlhelp.com/reference/css/structure.html#cascade

answered Mar 10 '16 at 13:36

Dan Orlovsky

1,045
7
18

1

Specificity also plays a part. With the same specificity (as they currently have), what you've said is true, but if the first selector had a greater specificity then what you've said wouldn't apply. `!important` isn't the only edge case. – James Donnelly Mar 10 '16 at 13:53
Thank you @JamesDonnelly. That was an oversight on my part. – Dan Orlovsky Mar 10 '16 at 13:56

Varon · Answer 2 · 2016-03-10T13:45:18.677

This is cause the selector's specificity

You can find the definition here: https://www.w3.org/TR/CSS2/cascade.html

There is also an example:

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

In your case the specificity is the same.. So the rule is that the last style has to be applied, if there are styles with the same attributes before (In your case background-color).

Only the !important behind an attribute can "break" these rules. So for maintenance reasons try to omit it.

You use the right logic but you start out with an incorrect conclusion. This is *not* because of the selectors' speciticity in the question. It's because of cascading. — TylerH, Mar 10 '16 at 14:49

score 2 · Answer 3 · edited May 23 '17 at 11:50

With the exception of :matches() and :not(), every pseudo-class counts exactly the same way as a class selector or an attribute selector in terms of specificity. Specificity makes no distinction between two :nth-child() pseudo-classes with different arguments that happen to match the same element, for example. The same principle applies to attribute selectors — an attribute selector always has the same specificity as a class selector or a pseudo-class, even if the attribute name is "id".

So the usual cascading rules apply: between two rules with equally specific selectors that match an element, the latter rule wins (!important notwithstanding).

score 1 · Answer 4 · answered Mar 10 '16 at 13:35

1

Yes last rule will overtake the other on same properties. This goes for css in general, not specific to this case.

answered Mar 10 '16 at 13:35

Dejan.S

18,571
22
69
112

Alright, thank you. Just wondered if :nth-child(2) has the same power then :nth-child(3). – Marcel Mar 10 '16 at 13:37

Why is my second :nth-child selector taking priority?

4 Answers4