CODEWITHSUNDEEP
csscss-selectors
Clinton Green
Clinton Green

Reputation: 9977

nth-of-type not behaving correctly with targeting classes in list of different elements

I have an instance where I have an element with a class of .card-one and I want to apply a class to each even element. This works fine but I also have other divs with .card-one nested inside them and I do not want the those to be counted.

I tried to target the elements as direct descendants of the parent container using the css below but it is not working.

.all-cards > .card-one:nth-of-type(even){ color: red; }

Here is an example of whats happening. https://jsfiddle.net/sz5z4k58/

Upvotes: 0

Views: 24

Answers (1)

Johannes
Johannes

Reputation: 67768

The nth-of-type selector doesn't refer to the class, but to the type, i.e. the tag, in your case the div and that within its parent element. So your nth-of-type selector actually selects every second DIV inside a parent if it has the specified class.

that's slightly confusing and not what one would expect from the name, but that's the way it works...

Upvotes: 1

Related Questions