5 Advanced CSS Pseudo Classes that will Save your Day
CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.
In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.
1. The ‘nth-child’ Pseudo-selector
One of my favorite pseudo-selectors is the nth-child. This can be very useful if you are dealing with a Content Management System where you have no ability to change the server-side code to add classes into the markup.
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword or a number. The argument N can also be given as an+b, where a and b are integers (for example, 3n+1). For example, if the argument is 3, the third element will be selected.
How to use the nth-child
If you put simply a number in the parentheses, it will only affect the element associated with that number. For example, here is how to select only the 3rd element:
ul li:nth-child(3) {
background-color: #333;
}
Now let’s look at the table below for Pseudo-class Expressions, the first column of the table represents values for n, and the other columns display the results (for N) of various example expressions.
Thus the expression 2n+1 will match the first, third, fifth, seventh, ninth, and so on, elements if they exist. This can be used to create alternated <li> background color.
ul li:nth-child(2n+1) {
background:#dfe6ec;
color: #333;
}
Check out our demo.
Internet Explorer has no support at all for the
:nth-child pseudo-class. But if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.Further Resources on how to use the nth-child
The :target pseudo-class
This pseudo-class affects an element that’s the target of a fragment identifier ( point to a specific element on a page, represented by a “#” and an anchor) in the document’s URL. When we click on a link that ends with a fragment identifier that element we are pointing to becomes the target (hence :target).
How to use the target
For example, if the URI was http://devsnippets.com/article/5-advanced-css-pseudo-class.html#nth, the following selector would match the element that had an id attribute of “nth”:
div > div:target {
background:#FFC1E4 none repeat scroll 0 0;
border:3px solid #EF4F7A;
padding:10px;
}
Check out our demo.
Internet Explorer has no support at all for the
:target pseudo-class. Opera doesn’t support this selector when using the back and forward buttons. Other than that, it has support from the other major browsers.Further Resources on how to use the target
3. Use the :focus Pseudo Class
You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the background and border color on those elements like so:
textarea:focus, input:focus {
background:#FFC1E4;
border:3px solid #EF4F7A;
}
Check out this demo.
Most browsers support the
:focus Pseudo Class.4. The negation pseudo-class: :not()
The :not() pseudo-class is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).
The code below selects all div elements that do not have .comment class.
div:not(.comment) {
border:1px solid #333
}
You can use a comma to choose more than one class. The code below selects all div elements that do not have .comment or .post classes.
div:not(.comment, .post) {
border:1px solid #333
}
The
:not() pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.5. The only-of-type pseudo-class
The only-of-type pseudo-class matches an element that’s the only child element of its type.
This selector will match an img element that’s the only child img element of its parent element:
.post > img {
float: left;
}
.post > img:only-of-type {
float: none;
margin: 10px;
}
Check out our demo.
The
only-of-type pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.
$20 bucks on CSS4 implementing a full-fledged scripting language, to facilitate interactive animations and whatnot. It’s just a matter of time.
When will we see the first “CSS exploit”?
@Alex: Don’t have to wait for CSS4. Webkit already has built in CSS animations and all sorts of advanced selectors, none of which are part of the CSS spec.
We have all that power now in SVG, and have had it for some years in most contemporary browsers.
“We have all that power now in SVG”
Thanks Molly for pointing that out!
thanks, really cool stuff
that last one was a bit hard to understand without an actual example tho.
Internet Explorer is so lame
Agreed. IE8 came out and big surprise, it doesn’t support anything either. Great.
Checkout IE9 preview, has a lot more promise to it !
You can defines a CSS type selector to set the skin for all components of a given type.
If your happy to use a JavaScript solution, you can emulate most of these selectors in Internet Explorer 5.5 to 8 with ie-css3.js
http://www.keithclark.co.uk/labs/ie-css3/
That is really help about little know pseudo classes.
helping techniques for web designers and developers.
Nice and cool techniques !
thx
Just check out http://www.w3.org/TR/css3-selectors/#selectors
Great article, I will be using these on some of our new websites, it’s gona make life a little easier, apart from MS Internet Explorer not supporting most of them, grrrr Microsoft you loosers, get it sorted in IE9!
Very tidy!! Love to read/learn more about css… It is just so cooool
Figures this is CSS3. All this CSS3/HTML5 stuff is such a huge tease. I’m learning it, but I’m not using any of it yet. It’ll be a while…
Love it! Thanks for the pseudo class article mate
@Alex I got $20 on it too – as it is CSS3 is becoming more intricate with all these advanced selectors. What happened to it’s purpose of taking care of deprecated presentational tags in HTML? Isn’t that one of the reasons you have Javascript , and what not.
Great article though.
Cool… Nice Stuff…
when using negation I’m not sure you’re allowed to use commas to exclude more than one element.
The correct way to do it:
div:not(.comment):not(.post) {
css
}