This last article in the series about CSS3 selectors will tell you about pseudo-class and Pseudo-element. Pseudo-class targets an element when it’s in a particular state or specific elements in a stack. A pseudo-element is composed of two colons- ::
Before this article we have already covered in this Power CSS3 series:
- universal, type, id and class selectors
- Descendant, Adjacent, Child, Sibling Combinators and Selectors
- Attribute Selectors
Pseudo-class selectors
1. X:state
1 2 3 4 | a:link { color: #D7DF01; } a:visited { color: #086A87; } a:hover { color: #04B404; } a:active { color: #DF0101; } |
I’m sure you have already seen a lot of examples of this in many websites. A pseudo-class uses a colon character to identify a pseudo-state that an element might be in like being hovered, being visited or the state of being activated.
The :link pseudo-class is used to target all anchors tags which are unvisited or have yet to be clicked on.
The :visited pseudo-class is used to target all anchor tags on the page which have been clicked on, or visited.
The :hover pseudo-class is used to target anchors tag when user hovers over an anchor.
The :active pseudo-class is used to target anchor tags while it is being activated (being clicked on or otherwise activated or at that moment when you click them).
Thus, each of these classes allows us to apply specific styling to anchor tags whenever they are in specific state.
Note: These pseudo-classes must come in the order as they are specified above in order to be effective!
View Demo | Compatible with: IE7+, Firefox, Chrome, Safari, Opera (:hover is compatible with IE6 which must be applied to an anchor element)
2. X:checked
1 2 3 | input[type=radio]:checked { border: 3px solid #333; } |
Simply targeting a checked user interface element like checkbox or radio button.
Compatible with: IE9+, Firefox, Chrome, Safari, Opera
3. X:not(selector)
1 2 3 | div:not(#slider) { padding: 20px; } |
Particularly useful if you wish to select all divs except the one whose has an id of slider with help of negation pseudo-class.
Compatible with: IE9+, Firefox, Chrome, Safari, Opera
4. X:nth-child(n)
1 2 3 | li:nth-child(3) { background: #999; } |
The nth-child pseudo-class allow us to target specific elements in a stack. This accepts an integer (starting from 1) as a parameter. To target the fifth list item, use li:nth-child(5).
As a bonus, we can even use this to select a variable set of children. For example, we could do li:nth-child(2n) to select every second list item or list item at even position.
Compatible with: IE9+, Firefox 3.5+, Chrome, Safari
5. X:nth-last-child(n)
1 2 3 | li:nth-last-child(3) { background: #DBA901; } |
Working almost identically as previous one with the difference is that it begins at the end of the collection, and works its way back.
View Demo | Compatible with: IE9+, Firefox 3.5+, Chrome, Safari, Opera
6. X:nth-of-type(n)
1 2 3 | #ntype-example p:nth-of-type(2) { font-size: 1.5em; } |
This class helps us to select according to the type of element rather than selecting a child.
Suppose we have many paragraph tags inside a div with id ntype-example and we wish to increase font size for second paragraph then the CSS rule above will work the same.
Compatible with: IE9+, Firefox 3.5+, Chrome, Safari
7. X:nth-last-of-type(n)
1 2 3 4 | #ntype-example p:nth-last-of-type(2) { font-size: 1.5em; font-style: italic; } |
Same as previous on, just beginning from the last. Targeting and styling second last paragraph with nth-last-of-type(n) pseudo-class.
View Demo | Compatible with: IE9+, Firefox 3.5+, Chrome, Safari, Opera
8. X:first-child
1 2 3 | ul li:first-child { margin-top: 0; } |
This structural pseudo-class allows us to target only the first child of the element’s parent.
Imagine you have list items and there is some margin applicable between list items. So to remove top margin for first element and bottom margin for last element, apply these classes making the look better.
Compatible with: IE7+, Firefox, Chrome, Safari, Opera
9. X:last-child
1 2 3 | ul li:last-child { margin-bottom: 0; } |
Just opposite to :first-child, :last-child will target the last element within it’s parent.
Instead of creating separate first and last classes to deal with margin/border for first and last elements of a parent, it’s wise to use :first-child and :last-child.
Check the live demo with this article where we have created deep border effect using this technique.
Compatible with: IE9+, Firefox, Chrome, Safari, Opera
Pseudo-element selector
10. X::pseudoElement
1 2 3 4 5 6 7 8 | p::first-letter { font-size: 2em; color: purple; font-family: cursive; float: left; padding-right: 2px; margin-top: -5px; } |
Pseudo-elements are used to style fragments of an element, such as the first line, or the first letter. These are designated by double colon ::. However there are few points to keep in mind while using them:
- Pseudo-elements must be applied to block level elements in order to take effect.
- “This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.” – Source w3.org
Target the First Line of a Paragraph
1 2 3 4 | p::first-line { font-size: 1.3em; font-family: 'monotype corsiva'; } |
View Demo | Compatible with: IE6+, Firefox 3.5+, Chrome, Safari, Opera
11. X::before
1 2 3 4 | #before-example a::before { content: "#"; padding-right: 10px; } |
Even wonder how do some websites show little icon just before an anchor tag? The pseudo-element ::before does the trick. As the name suggests, this selector inserts an imaginary element into the page, inside the targeted element, before it’s contents.
Instead of having # as content, you can use font icon to display icon as we have used in our website. Just note the icons appearing to the left of links below article heading.
According to the CSS3 Selectors specification, you should technically use the pseudo-element syntax of two colons
::. However, to remain compatible, the user-agent will accept a single colon usage as well. In fact, at this point, it’s smarter to use the single-colon version in your projects.
So this means the X:before and X:after (single colon version) will sure work as well.
View Demo | Compatible with: IE9+, Firefox, Chrome, Safari, Opera (single colon is supported in IE8)
12. X::after
1 2 3 4 5 6 7 8 9 10 11 12 13 | .clearfix::after { content: ""; font-size: 0; height: 0; display: block; clear: both; visibility: hidden; } .clearfix { *display: inline-block; _height: 1%; } |
In such cases when the overflow: hidden; method isn’t possible, the ::after pseudo-element hack does an awesome job. This hack appends a space after the element, and then clear it. This selector inserts an imaginary element inside the targeted element, after it’s contents.
Compatible with: IE9+, Firefox, Chrome, Safari, Opera (single colon is supported in IE8)
Conclusion
- While using new selectors be careful about their compatibility issue with old browser like IE6.
- Alternatively, you can use this excellent IE9.js script by Dean Edward to bring support for these selectors to older browsers.
- To make your code faster when working with JavaScript libraries (like the popular jQuery), always try to use these native CSS3 selectors over the library’s custom methods/selectors, whenever possible, as the selector engine can use the browser’s native parsing, rather than its own.
Thanks for reading, and let me know how you picked up a trick or two and used in your projects!