The pseudo-classes and pseudo-elements are keywords that can be appended to selectors to make them more specific. They are easy to recognize because they are always preceded by one or two colons.
Pseudo-Elements
Pseudo-elements enable parts of an element to be styled. Only one of these can be applied to any one selector.
first-letter and first-line
The pseudo-elements ::first-letter and ::first-line
can apply styles to the first letter and the first line of an element. They work only on block elements such as paragraphs.
p::first-letter { font-size: 120%; }
p::first-line { font-weight: bold; }
The preceding first rule makes the initial letter in a paragraph render 20% larger than other text. The second rule makes the first line of text in a paragraph bold.
before and after
As their names indicate, the ::before and ::after
pseudo-elements can target the location before and after an element. They are used together with the content property to insert content before or after an element.
p::before { content: "Before"; }
p::after { content: "After"; }
These rules make the following paragraph display as “BeforeMiddleAfter”:
<p>Middle</p>
The content property is special in that it can be used only together with these two pseudo-elements. It is also the only property that breaks the line between content (HTML) and design (CSS). Keep in mind that this line should be broken only when the presence of a piece of content comes down to a design decision. For example, the content property can be used to add an icon before an element, which can be done using the url function.
p.bullet::before { content: url(my-bullet.png); }
The four pseudo-elements described so far were introduced in CSS 2 where they used only a single colon (:). CSS 3 introduced the double-colon (::) notation to differentiate pseudo-elements from pseudo-classes. W3C has deprecated use of the single colon notation, but all major browsers continue to support both syntaxes. Inclusion of the single colon notation would be appropriate only if support for the legacy browser IE8 is desired.
.foo:after {} /* CSS 2 */
.foo::after {} /* CSS 3 */
All major desktop browsers support a fifth pseudo-element – ::selection. As the name implies, this pseudo-element can add styling to content selected by the user. Valid styling properties for most browsers are limited to color and background-color.
::selection { background-color: blue; }
Pseudo-Classes
Pseudo-classes permit styling based on element relationships and on information not found in the HTML document. Most of them fall into three categories: dynamic, structural, and user interface pseudo-classes. Unlike pseudo-elements, multiple pseudo-classes can be applied to a selector to make it even more specific.
Dynamic Pseudo-Classes
The first category of pseudo-classes is used to apply styles to links or other interactive elements when their state is changed. There are five of them, all of which were introduced in CSS 2.
link and visited
The dynamic pseudo-classes :link and :visited
can be applied only to the anchor element (<a>). The :link pseudo-class matches links to pages that have not been viewed, whereas :visited matches links that have been viewed.
a:link {} /* unvisited links */
a:visited {} /* visited links */
active and hover
Another pseudo-class is :active
, which matches elements as they are being activated, for example by a mouse click. This is most useful for styling anchor elements, but it can be applied to any element.
a:active {} /* activated links */
A selector with the :hover pseudo-class appended to it is applied when the user moves a pointing device, such as a mouse, over the selected element. It is popularly used to create link roll-over effects.
a:hover {} /* hovered links */
These four pseudo-classes need to appear in the proper order when applied to the same selector. Specifically, the :hover pseudo-class must come after :link and :visited, and for :active to work it must appear after :hover. The phrase “love and hate” can be used as a reminder for the initial letters that make up the correct order.
a:link {} /* L */
a:visited {} /* V */
a:hover {} /* H */
a:active {} /* A */
focus
The last dynamic pseudo-class is
:focus
, which can be used on elements that can receive focus, such as the form <input> element. The difference between :active and :focus is that :active lasts only for the duration of the click, whereas :focus lasts until the element loses focus.
input:focus {}
Structural Pseudo-Classes
The structural pseudo-classes target elements based on their relation with other elements. CSS 2 included only one structural pseudo-class in this category, :first-child, whereas CSS 3 introduced a wide array of new ones. The CSS 3 structural pseudo-classes are supported in all major browsers.
first-child
The :first-child
pseudo-class matches the first child of the selected element.
p:first-child {} /* first paragraph child */
In the following example, this rule applies to the first child element of the paragraph.
<p>
<span>First child</span>
<span>Text</span>
</p>
last-child
The
:last-child
pseudo-class represents the last child of the selected element.
p:last-child {} /* last paragraph child */
This rule targets the last child of the following paragraph element.
<p>
<em>Text</em>
<em>Last child</em>
</p>
only-child
The
:only-child
pseudo-class matches elements that do not have any siblings.
p:only-child {} /* children without siblings */
This rule is applied to the following first <strong> element because it is the only child of the paragraph. The second paragraph element has two children, so none of them are targeted by this rule.
<p>
<strong>Only child</strong>
</p>
<p>
<strong>Text</strong>
<em>Text</em>
</p>
only-of-type
As its name implies, the
:only-of-type
selector matches the selected element only if it does not have any siblings of the same type.
p:only-of-type {} /* only <p> element */
The following paragraph is targeted by this rule because it is the only paragraph element of its parent.
<div>
<h1>Text</h1>
<p>Only of type</p>
</div>
first-of-type
The
:first-of-type
pseudo-class matches the first child element that is of the selected type.
p:first-of-type {} /* first <p> element */
It matches the first paragraph element in the following markup:
<div>
<h1>Text</h1>
<p>First of type</p>
<p>Text</p>
</div>
last-of-type
The last sibling of a specific type can be selected with the
:last-of-type
pseudo-class.
strong:last-of-type {} /* last <strong> element */
This rule applies to the last <strong> element among its siblings.
<div>
<strong>Text</strong>
<strong>Last of type</strong>
</div>
nth-child
The
:nth-child(an + b)
pseudo-class matches every b child element after the children have been divided into groups of a elements.
p:nth-child(1) {} /* first child */
p:nth-child(2n) {} /* even children */
p:nth-child(2n+1) {} /* odd children */
These rules apply to the following HTML markup:
<p>
<span>First and odd</span>
<span>Even</span>
<span>Odd</span>
</p>
Matching odd and even children is a common operation. To simplify this selection the keywords odd and even can also be used, for instance to match every other row in a table.
tr:nth-child(even) {} /* even table rows */
tr:nth-child(odd) {} /* odd table rows */
As shown, the argument to :nth-child() can be an integer, the keywords even or odd, or an expression in the form of an+b. In the expression form, the keyword n is a counter that iterates through all child elements. The counter may be negative, in which case the iteration occurs backwards. This can be used to select a specific number of first children.
p:nth-child(-n+3) {} /* first three children */
The math and arguments used together with :nth-child() are also valid for the next three pseudo-classes, all of which start with :nth .
nth-of-type
The :nth-of-type(an+b)
pseudo-class matches the bth element of the selected type after the siblings of that type have been divided into groups of a elements.
p:nth-of-type(2) {} /* second paragraph sibling */
p:nth-of-type(2n) {} /* even paragraph siblings */
p:nth-of-type(2n+1) {} /* odd paragraph siblings */
The behavior of this pseudo-class is similar to :nth-child, but it matches siblings of the same type of the specified element instead of matching children of the specified element.
<div>
<em>Text</em>
<p>Odd</p>
<p>Second and even</p>
<p>Odd</p>
</div>
Similar to the other :nth pseudo-classes, the keywords odd and even can be used to match siblings of the same type whose index is odd or even.
p:nth-of-type(even) {} /* even paragraph siblings */
p:nth-of-type(odd) {} /* odd paragraph siblings */
nth-last-of-type
The :nth-last-of-type(an+b)
pseudo-class matches the element of the selected type that has an+b elements of that same type after it. This behavior is equivalent to the :nth-of-type pseudo-class, except that elements are counted starting from the bottom instead of the top.
p:nth-last-of-type(3) {} /* third last paragraph */
p:nth-last-of-type(-n+2) {} /* last two paragraphs */
These two rules apply to the following example. The <em> element is not counted because it is not of the specified type—in this case, paragraph.
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
<em>Text</em>
</div>
nth-last-child
The :nth-last-child(an+b)
pseudo-class represents any element that has an+b siblings after it. Its behavior is the same as :nth-child, except that it starts with the bottom element instead of the top one.
p:nth-last-child(3) {} /* third last child */
p:nth-last-child(-n+2) {} /* last two children */
These two rules apply to the child elements in the following example:
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
</div>
empty
The
:empty
pseudo-class matches selected elements that do not have any content.
p:empty {} /* empty paragraphs */
An element is considered empty if it has no child elements, text, or whitespace except for comments. The preceding rule applies to the following two paragraphs:
<p></p>
<p><!-- also empty --></p>
root
The
:root
pseudo-class matches the topmost element in the document tree. In HTML documents, this is always the <html> element.
:root {} /* root element */
This pseudo-class is mainly useful when CSS is used with other languages, such as XML, in which the root element can vary.
User Interface Pseudo-Classes
CSS 3 introduced a number of user interface pseudo-classes that are used to style interactive elements based on their current state.
enabled and disabled
The :enabled and :disabled
pseudo-classes match any element of the selected type that is either enabled or disabled. They apply only to interactive elements that can be in either an enabled or disabled state, such as form elements.
input:enabled { background: green; }
input:disabled { background: red; }
The following form contains one enabled and one disabled input element, which are affected by these two rules:
<form>
<input type="text" name="enabled">
<input type="text" name="disabled" disabled>
</form>
checked
The
:checked
pseudo-class matches elements that are in a selected state. It can be used only on check box, radio button, and <option> elements.
input[type="checkbox"]:checked {}
This rule matches any check boxes that are selected on the web page.
<form>
<input type="checkbox">
</form>
valid and invalid
The :valid and :invalid
pseudo-classes are used to provide feedback to users when they are filling out forms. Modern browsers can perform a basic field validation based on the input type of a form element and, together with these pseudo-classes, the result can be used to style the input element.
input:valid { background: green; }
input:invalid { background: red; }
Two fields are given here, one required and one optional. The first field remains invalid until an e-mail is entered into the field. The second field is optional and is therefore valid if left empty.
<form>
<input type="email" required>
<input type="email">
</form>
Note that these pseudo-classes are in no way a substitution for proper form validation, using JavaScript or PHP, for example. Browser support for these two pseudo-classes exists in Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, and IE 10+.
required and optional
A form field with the required attribute set is matched by the :required pseudo-class. The related :optional pseudo-class does the opposite: it matches input elements that do not have the required attribute set.
input:required { color: red; }
input:optional { color: gray; }
The following form contains one required and one optional input element, which is targeted by the previous styles:
<form>
<input type="email" required>
<input type="url">
</form>
Like the :valid and :invalid pseudo-classes, support for :required and :optional exists in Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, and IE 10+.
out-of-range and in-range
An input element can include the min and max attributes to define the range of legal values for that element. The out-of-range and in-range pseudo-classes can be applied to target input elements that are currently inside or outside of this specified range.
input:out-of-range { color: red; }
input:in-range { color: black; }
Support for both of these pseudo-classes was added in Chrome 53+, Firefox 50+, Safari 10.1+, Opera 40+, and Edge 13+. The following form shows two input fields using the min and max attributes.
<form>
<input type="number" min="1" max="5">
<input type="date" min="1900-01-01">
</form>
read-write and read-only
Input elements that include the read-only attribute cannot be edited. Such elements can be targeted using the read-only pseudo-class. In contrast, any element that can be edited can be selected with the read-write pseudo-class.
input:read-only { color: gray; }
input:-moz-read-only { color: gray; }
input:read-write { color: black; }
input:-moz-read-write { color: gray; }
These pseudo-classes are usable in Chrome 36+, Firefox 3+, Safari 4+, Opera 11.5+, and Edge 13+. The –moz– prefix is necessary for all versions of Firefox. The following markup shows how the read-only attribute is applied to a form input element.
<form>
<input type="text" value="unavailable" readonly>
</form>
Other Pseudo-Classes
Some pseudo-classes do not fit into any of the earlier categories, namely the :target, :lang” :not pseudo-classes.
target
The :target pseudo-class
can style an element that is targeted through an id link. It can be useful for highlighting a targeted section of the document.
:target { font-weight: bold; } /* targeted element */
When the following internal page link is followed, this rule is applied to the anchor element. The browser also scrolls down to that element.
<a href="#my-target" id="my-target">In page link</a>
lang
The pseudo-class
:lang()
matches elements determined to be in the language provided by the argument.
p:lang(en) {}
This pseudo-class applies to paragraph elements that are intended for an English audience, such as the following paragraph:
<p lang="en">English</p>
Note that the behavior of this pseudo-class is similar to the language attribute selector. The difference is that the :lang pseudo-class also matches elements if the language is set on an ancestor element, or in some other way such as through the page HTTP header or <meta> tag.
<body lang="fr">
<p>French</p>
</body>
not
The negation pseudo-class
:not
matches elements that are not targeted by the specified selector.
p:not(.first) { font-weight: bold; }
This example rule selects paragraphs that are not using the first class.
<p class="first">Not bold</p>
<p>Bold</p>