Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS First- and last-of-type pseudo selectors. Reply To: First- and last-of-type pseudo selectors.

#257164
bearhead
Participant

yes, p.test:last-of-type {color: yellow;} means apply yellow color to the last p with class test.

The class isn’t ignored… it is important to raise the specificity of your selector, maybe the below example will clarify:

The last-of-type selector targets the last type of an element. So if you were to write the selector as just .test:last-of-type and then have a p element followed by a span in your html (both with class test), both would be changed to yellow.
example:

https://codepen.io/kvana/pen/zdvJwj

but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.