[CSS] nth-child Selectors - The WWW

Users browsing this thread: 1 Guest(s)
Evolution Evolution Offline | 28-07-2012, 02:19 AM | #1
Long time nixers
Ever been in a situation where you had two elements (lets say <li>) in a row but only wanted to style one of them?, sure you could do this by giving one a class, but seeing as we are up to CSS3 now that is no longer necessary; example:

Say we want the second one to have a blue background and the rest red.

PHP Code:
<ul>
    <li>Home</li>
    <li>Tutorials</li>
    <li>Projects</li>
</ul> 

Code:
li {
    background: red;
}

li:nth-child(2) {
    background: blue;
}

As you can see here, it works perfectly.

There are other ways you can use this besides selecting individual elements, in mybb themes there are two classes called trow1 and trow2 which control styling of various rows and is often used to create an alternating color look, however this can now be done with no classes at all:

Code:
td:nth-child(even) {
    background: #333;
}
td:nth-child(odd) {
    background: #444;
}

Just thought Id throw this out there for those interested, I know I for one don't like an overbearing amount of classes.
[Image: mg3nm7.gif]
We live as we dream, alone.


View a Printable Version