Ordering CSS pseudo-elements (and pseudo-classes)

Look out for the order you use CSS pseudo-elements in, or you may not get the results you want. Today, I found that using li:before:first-child doesn’t work to style the :before pseudo-element on my first li, but li:first-child:before does.

Rather than chaining together the way something like .title.example (which would select element with both classes “title” and “example”, regardless of order), the pseudo-element order matters. So li:before:first-child is styling the first child of the li:before element, while li:first-child:before is styling the :before pseudo-element on the first li.

In fact, in looking up the documentation to link below, I realized that :first-child is actually a pseudo-class, rather than a pseudo-element. The docs below don’t state it, but it’s possible that in order to get correct behavior, the pseudo-class should always come before the pseudo-element.

References:
pseudo-class
pseudo-element
:before
:first-child

Advertisements

About joanwolk

3 things I like: theater, food, geekery. 3 things I don't like: clichés, blisters, coffee.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s