Table of Contents
Welcome into the second part of our Complete guide to CSS selectors. In first part we explored the basic ones and ended up with attribute selectors. Today we will continue with pseudo-classes and pseudo-elements. Those of you who are not that grounded in selectors should look at Pt1 first. However, if you are ready, we can continue in our guide.
Series begins in part 1.
[data-filetype="value"]
This is something called custom attribute. With this attribute you can select elements on random data attributes. You can use any attribute you want like data-name, data-info, data-type etc.
Example:
<a href="....." data-filetype="image">Lorem picture<a/>
Example:
a[data-filetype="image"] {}
:active
This will apply to all elements when you click on them (active elements). You can use this pseudo-class to any element you want and not just anchor tag.
a:active {
color: #c00;
}
div:active {
border: 1px solid black;
}
:hover
This will apply to all elements when you hover over them. This is, as :active, applicable to any element.
section:hover {
background: tomato;
}
a:hover {
text-decoration: underline;
}
:visited
Rules for this pseudo-class will apply to all links that were already visited (clicked on). This works only with anchor tags.
a:visited {
text-decoration: line-through;
}
:focus
This selects an element which has focus (selected by “Tab” key).
a:focus,
input:focus {
color: #dd5230;
}
:link
This selects all unvisited link (anchor tags) on the page.
a:link {
text-decoration: none;
}
Pseudo classes
Pseudo classes bellow works only for <input> elements
:checked
This selects all input elements that were checked.
input:checked {
color: #ff2233;
}
:disabled
This will select all input with attribute “disabled”.
input:disabled {
background: #aaa;
}
:enabled
This is same as disabled but selects all enabled elements.
input:enabled {
background: #2ecc71;
}
:required
This pseudo-class will select all inputs with specified attribute “required”.
input:required {
color: #c0392b;
}
:optional
While “required” selects all inputs with that attribute, this one will select all the rest of them (not required).
input:optional {
color: #3498db;
}
:valid
This will select all input elements with valid value.
input:valid {
background: #1abc9c;
}
:invalid
This selects all inputs with invalid value.
input:invalid {
background: #e67e22;
}
:in-range
This pseudo-class will select all inputs with value in specified range.
input:in-range {
backround: #ecf0f1;
}
:out-of-range
This selects input with value out of specified range.
input:out-of-range {background: #34495e;}
:read-only
All elements with “readonly” attribute will be selected.
input:read-only {
font-size: 1.2em;
}
:read-write
This is opposite to “readonly”. Every element which does NOT have this attribute (“readonly”) will be selected.
:input:read-write {
font-size: .8em;
}
CSS selectors for typography
These selectors are usable only with text elements.
::first-letter
This will simply select the first letter of text inside element.
h1::first-letter {
color: gray;
}
::first-line
Selects the first line of text inside element.
p::first-line {
line-height: 1.5em;
}
:lang(language)
This selector will select all elements with specified language in “lang” attribute.
p:lang(en) {
text-align: center;
}
:after
This pseudo-class will simply generate content after the selected element.
.clearfix:after {
display: block;
visibility: hidden;
content: '';
clear: both;
height: 0;
font-size: 0;
}
:before
This selector, on the other hand, generate content before an element
div:before {
position: absolute;
content: '';
width: 20px;
height: 60px;
background: #eee;
}
:not
The negation pseudo-class will select all element except the one specified in bracket. To select all elements without class of “red”:
*:not(.red) {
color: white;
}
NOTE: In IE, the negation pseudo-classes is supported only from version 9 and higher!
:first-child
First child pseudo-class will select the very first element. So, if you have three paragraphs and want just the first one:
p:first-child() {
font-weight: bold;
}
NOTE: In IE, the first-child pseudo-classes is supported only from version 7 and higher!
:last-child
Last child will select the last element.
p:last-child() {
font-style: italic;
}
NOTE: In IE, the last-child pseudo-classes is supported only from version 9 and higher!
:nth-of-child()
When you need to select some specified element from a stack you will use this pseudo-class. It is NOT zero based, so to select the fourth list item:
li:nth-child(4) {
text-decoration: underline;
}
:nth-last-child()
This works almost same as nth-child, except it selects elements from the end. To select the third for the last item:
li:nth-last-child(3) {
font-size: 80%;
}
:only-child
This will selects all elements which are only child of its parent.
p:only-child {
font-family: serif;
}
NOTE: In IE, the only-child pseudo-classes is supported only from version 9 and higher!
:first-of-type
This works the same as first child, but selection depends on specified type of element.
p:first-of-type {
padding: .25em;
}
:last-of-type
Also similar to last-child. To select the last div:
div:last-of-type {
margin: 0 auto;
}
:nth-of-type()
Like with nth-of-child, this pseudo-class will allow you to select random element type by specifying its number in order. To select fifth span:
span:nth-of-type(5) {
color: #bdc3c7;
}
:nth-last-of-type()
With this you can, as with nth-last-child pseudo-class, select an element but starting from the end. To select seventh paragraph from the end:
p:nth-last-of-type(7) {
font-weight: bold;
}
:only-of-type
Selects every element that is the only element of its parent.
h1:only-of-type {
text-indent: 1.5em;
}
NOTE: any “-of-type” pseudo-classes are not supported in IE 8 and earlier and Firefox lower than 3.5 (Chrome and Opera support is not limited).
Closing thoughts on CSS selectors
Finally, we arrived on the end of the Complete guide to CSS selectors. In this part we discussed more advanced CSS selectors and some of them (type and child) have some issues with support mainly in IE browser. Always keep that in mind while using to avoid getting into some unnecessary troubles. I hope you like this guide and will use what you’ve learned in your work.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
