Over a million developers have joined DZone.

CSS3 Pseudo-headache

DZone's Guide to

CSS3 Pseudo-headache

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

So, the other day I was building a list for an HTML page.  I needed to change the font color of the last item in the list having the top CSS class.

Here is my list, and its equivalent HTML structure with classes:

CSS Pseudo - Sample 1

Since what I wanted to do was merely style-related, I tought of only using CSS for it. After all, how hard could it be!? RIGHT!?

Anyways, after choosing to use CSS pseudo selectors for it, my first attempt was something like this:

ul li.list-item.top:last-child {
    color: red;

Makes perfect sense, right? I mean: “from the list, select the last child element with the list-item top class and apply style to it.” Well, not so fast… Turns out it doesn’t work that way.

However, if you add top to the only element that does not have it, everything magically works. Why is this? Apparently, CSS pseudo selectors handle classes a little bit different than I thought. My CSS selector reads a little more like: “from the list, select the last child element and apply the style IF it has the list-item top class.” This means that if the last element in the list does not have that class, it will just skip it.

Of course, I could not style my list without using JavaScript or adding extra CSS classes to the element. It would be awesome if that CSS selector worked, since is not the first time I’ve had to do something like that. Sigh…

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Luis Aguilar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}