Pseudo-classes are selectors that use information that is outside of the document tree. The information that is not in the attributes of the element. This information can change between visits or even during the visit. Pseudo-classes always have a colon followed by the name of the pseudo-class.
There are two mutually exclusive link pseudo-classes, namely, :link and :visited.
This selects links that have not been visited. The syntax is as follows:
:link
This pseudo-class exists on any anchor element that has not been visited. The browser may decide to switch a link back after some time.
Here is an example along with the :visited pseudo-class. Here is its HTML:
<a href="#test">Probably not visited</a> <a href="https://www.google.com">Probably visited</a>
Here is the CSS. We can make an assumption that you have visited Google, so the link would likely be green in color:
a:link { color: #ff0000; }
a:visited { color: #00ff00; }This selects links that have been visited. The syntax is as follows:
:visited
This pseudo-class exists on any anchor element that has been visited.
Here is an example along with the :link pseudo-class. Here is its HTML:
<a href="#test">Probably not visited</a> <a href="https://www.google.com">Probably visited</a>
Here is the CSS. We can make the same assumption that you have visited Google, so the first link should be red and the second link will be green in color:
a:link { color: #ff0000; }
a:visited { color: #00ff00; }These classes take effect based on actions of the user. These selectors are not mutually exclusive, and an element can have several matches at once.
This is used when the element is being activated:
:active
The :active selector is most commonly used when the mouse button is pressed but not released. This style can be superseded by the other user actions or link pseudo-classes.
Here is an example:
<a href="https://www.google.com">Google</a>
The link will turn green while you are clicking on it. Here is its CSS:
a:active { color: #00ff00; }This selector targets the element that has to be focused on. The syntax is as follows:
:focus
An element is considered to have focus when it accepts keyboard input. For example, a text input element that you have either tabbed to or have clicked inside.
Here is a text input example:
<input type="text" value="Red when focused">
Here is the CSS. This also highlights the fact that you can use a pseudo-class, which allows use of more complex selectors:
input[type="text"]:focus { color: #ff0000; }This selector targets the elements when a user hovers their mouse over an element:
:hover
This is used when a user has their cursor hovering over an element. Some browsers (a great example being mobile touch devices, such as mobile phones) may not implement this pseudo-class, as there is no way to determine whether a user is hovering over an element.
Here is an example:
<span>Hover over me!</span>
The text in the span will be red in color when hovered over. Here is its CSS:
span:hover { color: #ff0000; }These selectors allow you to select elements based on the document tree; this is very difficult or impossible to do with other selectors. This only selects nodes that are elements and does not include text that is not inside an element. The numbering is 1- based indexing.
This targets an element that is the first child of another element:
:first-child
This is the same as :nth-child(1). This selector is straightforward, the first child of the element type this is applied to will be selected.
Here is an example that will only select the first paragraph element. Here is the HTML:
<p>First paragraph.</p> <p>Second paragraph.</p>
Here is the CSS. This will change the text of the first paragraph red:
p:first-child { color: #ff0000; }This targets the first element type that is a child of another element:
:first-of-type
The :first-of-type attribute is different from :first-child because it will not select the element unless it is the first child. This is the same as :nth-of-type(1).
Here is an example that will target the first paragraph element even though it is not the first child. Here is the HTML:
<article> <h1>Title of Article</h1> <p>First paragraph.</p> <p>Second paragraph.</p> </article>
Here is the CSS:
p:first-of-type { color: #ff0000; }This targets an element that is the last child of another element:
:last-child
This is the same as :nth-last-child(1). This selector is straightforward, the last child of the element type this is applied to will be selected.
Here is an example that will only select the last paragraph element. Here is the HTML:
<p>First paragraph.</p> <p>Second paragraph.</p>
Here is the CSS. This will change the color of the second and first paragraph red. This selector works because even on the most basic of pages, the p element is a child of the body element:
p:last-child { color: #ff0000; }This targets the last element type that is a child of another element:
:last-of-type
The :last-of-type attribute is different from :last-child because it will not select the element unless it is the first last-child attribute. This is the same as :nth-last-of-type(1).
Here is an example that will target the last paragraph element. Here is its HTML:
<article> <p>First paragraph.</p> <p>Second paragraph.</p> <a href="#">A link</a> </article>
Here is the CSS:
p:last-of-type { color: #ff0000; }This will divide all of the child elements and select them based on where they exist:
:nth-child(an+b)
This selector has a parameter that is very expressive in what you can select. This also means that it is more complex than most other CSS rules. Here is the technical specification of the parameter. This selects elements based on its preceding elements.
The parameter can be split into two parts: part a Part b. The part a is an integer that is followed by the character n. Part b has an optional plus or minus sign followed by an integer. The parameter also accepts two keywords: even and odd. Consider 2n+1 for example.
This is much easier to understand when you look at it this way. The first part, an, is what the children are divided by. The 2n value would make groups of two elements and 3n value would make groups of three elements, and so on. The next part +1 will then select that element in the grouping. 2n+1 would select every odd item row because it is targeting the first element in every grouping of two elements. 2n+0 or 2n+2 would select every even item row. The first part, part a, can be omitted, and then it would just select the nth child out of the entire group. For example, :nth-child(5) would only select the fifth child and no other.
Table rows are a great example of using this selector, so we will target every odd row. Here is the HTML:
<table> <tr><td>First (will be red)</td></tr> <tr><td>Second</td></tr> <tr><td>Third (will be red)</td></tr> </table>
Here is the CSS:
tr:nth-child(2n+1) { color: #ff0000; }This will target the nth element from the end:
:nth-last-child(an+b)
This selector counts the succeeding elements. The counting logic is the same as it is for :nth-child.
Here is an example using a table. Here is the HTML:
<table> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr> <tr><td>Fourth</td></tr> </table>
The first CSS rule will change the color of every other row to red, but because it counts from the end, the first and third row will be selected. The second CSS rule will only target the last row:
tr:nth-last-child(even) { color: #ff0000; }
tr:nth-last-child(-n+1) { color: #ff0000; }This selects elements based on their type and where they exist in the document:
:nth-last-of-type(an+b) :nth-of-type(an+b)
Like all the other nth selectors, this one uses the same logic as :nth-child. The difference nth-of-type being that :nth-last-of-type only groups by elements of the same type.
Here is an example that uses paragraphs and spans:
<p>First</p> <span>First Span</span> <span>Second Span</span> <p>Second</p> <p>Third</p>
Here is the CSS. This rule will only target the paragraphs and make the odd ones red:
p:nth-of-type(2n+1) { color: #ff0000; }This targets an element that has no siblings:
:only-child
This will match when the :only-child attribute is the only child of an element.
Here is an example with two tables, where one has multiple rows and the other has only one:
<table> <tr><td>First</td></tr> <tr><td>Second</td></tr> <tr><td>Third</td></tr> </table> <table> <tr><td>Only</td></tr> </table>
Here is the CSS to target the only row in the second table:
tr:only-child { color: #ff0000; }This targets when there is only one of this element:
:only-of-type
This will only match when there are no other siblings of the same type under a parent element.
Here is an example that uses arbitrary divisions to create a structure where one paragraph element is the only one of its type. Here is the HTML:
<div>
<p>Only p.</p>
<div>
<p>Not the </p>
<p>only one.</p>
</div>
</div>Here is the CSS rule that will only target the first paragraph's element:
p:only-of-type { color: #ff0000; }