Pseudo-Class Selectors
When users begin to interact with your website, the state or position of some elements may change. In order to apply CSS styling based on the state of an element, owing to users’ interaction, we use the pseudo-class selectors.
For example, when you create a link, it renders as blue underlined text. We can use pseudo-class selectors to style the link when it is hovered or when the link is visited (i.e. clicked on).
So, when a user points a mouse over a link, it is in a hovered state. Also, when a link is clicked it is in a visited state.
Pseudo-class selectors can also be applied based on the position of an element within the document.
When applying pseudo-class selectors to an element, we must always precede the class with a colon “:”.
For example, a:hover{…}.
There are different pseudo-class selectors for different purposes. We will examine some of them in alphabetical order. In this examination, we will define the enlisted pseudo-class selectors and their purposes.
In some cases, we give examples. Let us go through each of them briefly. Before you continue, checkout our previous posts on CSS syntax and Selectors.
:active This is used to style elements such as link “a” and “button”. It applies to elements when a mouse is pressed on them. However, styles in : active will be overridden by styles in other link pseudo-class selectors such as: link, hover and visited.
In all, : active can come after the above pseudo-classes in the order: LVHA.
Example
a:active{
color: green;
text-decoration: none;
}
:checked This group of pseudo-class selectors is used to style options in a select element. And items in an input element of type radio and/or checkbox. The style will render when any of these items are selected.
Example
input[type= “radio”]:checked{
color: orange;
}
input[type=“checkbox”]:checked{
color: lime;
}
option:checked{
color: blue;
}
:default This is used to style default form elements in a group.
For example, it will match the input of type radio or checkbox, if they are checked by default.
Input:default{
color: red;
box-shadow: 0 1px 1px 0 silver;
}
:dir() Used to style element based on the text direction, which could be (rtl) or (ltr)
:disabled Used to style disabled input element. For example,
input[type= “text”]:disabled{
background-color: yellow;
}
: enabled Used to style any element that is enabled, that is, an element users can interact with.
Example:
input:enabled{
color: darkgreen;
}
:empty Used to style elements that has no children at all, i.e. completely empty element – no white space, no comment.
<p></p> <div></div>
The above elements are empty. To style it, simply write:
p:empty{
background-color: coral;
}
: first This is usually used when setting @page ruleset to represent the first page when printing a document. e.g.
@page:first{
margin-left: 20%;
}
:first-child This group of pseudo-class selectors is used to style the first element specified among its siblings in the group. To illustrate, we have:
In this example, the first paragraph in the two divs will be styled because each is the first child of each div.
In the second example above, only the first paragraph will be styled because the paragraph in the second div is not the first child.
NOTE: The code embedded above has examples for the :first-of-type, :last-child, and :last-of-type. Click on the HTML and CSS tabs respectively to study the codes.
:first-of-type This type of pseudo-class selectors is used to style the first element of the specified type among a group of sibling elements in each divisional section of an HTML document.
E.g.
<!-- Html code -->
<div>
<p>…</p>
<p>…</p>
</div>
<div>
<p>…</p>
<p>…<p>
</div>
/*CSS Code */
p:first-of-type{
color: purple;
}
The above style will apply to the first <p> element in each of the <div>s
: fullscreen Is used to style any selected element in a fullscreen mode. That is when in a fullscreen mode, the selected elements are styled to the specified CSS code.
: focus This is used to style input elements that are selected or brought to focus, either by mouse click or by keyboard tab.
<!--Example -->
input:focus{
color: blue;
}
:focus-within This type of pseudo-class selectors is used to style an element whose one of its descendants has received a focus. For example, we can style a form object when one of its input elements receives a focus.
Example
In the above example, notice how the form background changes to green immediately you selected any of its controls.
NOTE: The above example has examples for other pseudo-class selectors like :in-range, :invalid, and :lang. Click the HTML and CSS tabs to study the codes.
:hover This is used to style an element when a user places mouse over the element or points at the element.
h1:hover{
background-color: #00ff00;
}
:in-determinate When the state of any form input element is indeterminate, then we use the style:
input:indeterminate{
color: red;
}
:in-range This is used to show that the values in the input element is within the limits specified by the min and max values.
See example above.
:invalid This is used to highlight form field elements that does not validate. It is basically used to highlight errors. See example above.
:lang() This is used to style elements based on the language code. See Example above.
:last-child Just like the first-child, this is used to style the last element in a group of elements. See illustration example above (under :first-child).
In the example, the last paragraph in the two divs will be styled because each is the last child of each div.
In the second example above, two of the paragraphs will be styled because the paragraphs are the last child of each div.
:last-of-type This type of pseudo-class selectors is used to style the last element of the specified type among a group of sibling elements in each divisional section of an HTML document. See example above.
HTML:
<div>
<p>…</p>
<p>…</p>
</div>
<div>
<p>…</p>
<p>…<p>
</div>
CSS:
p:last-of-type{
color: coral;
}
The above style will apply to the last <p> element in each of the <div>s
: left This is usually used when setting @page ruleset to represent the left-hand pages when printing a document. Example:
@page: left{
margin: 2in 2in;
}
:link This is used to style the <a>, <area> or <link> elements that has not been visited. Example:
HTML Code:
<p>The great tutorial was first shown <a href= https://www.kmacims.com.ng>Here</a></p>
CSS Code:
:link{
color: green;
text-decoration: none;
}
:matches()/ :is()/ :any This type of pseudo-class selectors is used to create large list of selector elements. We use it to style an element that matches the list of elements within our selection. If your browser is not compatible with :is and :matches, you can use the backward compatibility :-webkit-any (for chrome) and :-moz-any(for mozilla).
For example, to style a paragraph that appears in any of <div>, <section>, or <article>, when in is hovered, we can do the following:
:is(div, section) p:hover{
color: red;
}
:matches(div, section) p:hover{
color: red;
}
:-webkit-any(div, section) p:hover{
color: red;}
:-moz-any(div, section) p:hover{
color: red;
}
:not() This kind of pseudo-class selectors is used to style elements that are not in the list of selectors specified by the :not(list of elements).
For example,
:not(div){…}
will select elements that is not a div. You may also specify a class or id within the :not.
:nth-child() This kind of pseudo-class selectors is used to style an element based on its position in a group with its siblings, when counting from the top.
The nth-child uses the following keywords and notations:
odd: Is used to represent odd siblings, e.g. 1, 3, 5, 7, etc
even: Is used to represent even siblings, e.g. 2, 4, 6, etc.
An+B: Is used to represent siblings, where A and B must be integers, and n begins from 0, 1, 2, …
Example:
<div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </div>
There are 4 paragraphs, so when we say, :nth-child(2n), it will select every second element among the group of its siblings.
However, if we say, p:nth-child(2), then it will select every <p> element that is second among group of sibling elements.
For example, in HTML table styling, we may use the following:
tr:nth-child(odd) OR tr:nth-child(2n+1) for odd rows
tr:nth-child(even) OR tr:nth-child(2n) for even rows
:nth-child(3) for the third element
:nth-child(3n) for multiples of 3 elements, say, 3×1=3, 3×2=6, 3×3=9, etc
:nth-child(3n+2) for multiples of 3 + 2 elements, in a progression, say, 3×0 + 2 = 2, 3×1 + 2 = 5, 3×2 + 2 = 7, etc
:nth-child(-n+4) for the first four elements, say, -0+4=4, -1+4=3, -2+4=2, -3+4=1.
:nth-child(n+3) :nth-child(-n+6) for a range beginning from the 3rd element to the 6th element.
Let us illustrate with this example:
:nth-last-child() This is the same as the nth-child. The difference is that we count from the bottom to the top. Everything applicable to the nth-child is also applicable here, but count from down up.
:nth-last-of-type() This kind of pseudo-class selectors is used to style the matched element of a specified type, depending on their position in the document, but counting from the bottom. The type is an element, say:
tr:nth-of-type(2n+1){...}
p:nth-of-type(n+3){...}
:nth-of-type() This is used to style the matched element of a specified type, depending on their position in the document, but counting from the top. The type is an element, e.g.
tr:nth-of-type(2n){...}
p:nth-of-type(n+3){...}
:only-child This kind of pseudo-class selectors is used to style an element in the HTML document that has only one child without siblings. It is the same as using any of: :first-child, nth-child(1) or nth-last-child(1).
HTML:
<div>
<p>This is the only child of a paragraph in this div</p>
</div>
<div>
<p>This is the first paragraph or <span>first child</span></p>
<p>This is the second paragraph</p>
<p>This is the last paragraph</p>
</div>
CSS:
p:only-child{
color: green;
}
The above example will style the <p> element in the first div.
:only-of-type This is used to style an element in the HTML document that has only one child of a particular type. It may have siblings, but not of the same type. For Example;
HTML:
<div>
<p>This is the only child of a paragraph in this div</p>
</div>
<div>
<p>This is the first paragraph or <span>first child</span></p>
<p>This is the second paragraph</p>
<p>This is the last paragraph</p>
</div>
CSS:
p:only-child{
color: red;} /*will style <p> in the first div only>*/
span:only-child{
color: purple;} /*will style the <span> element in the second div only*/
:optional This kind of pseudo-class selectors is used to select and style <input>, <select> and <textarea> elements that are optional when submitting a form. Remember that an input element is optional if it does not have the required attribute set to it. e.g.
input:optional{
border: green;
background-color: blue;
}
:out-of-range We use this kind of pseudo-class selectors to select and style input element that have their values outside the values specified by the min and max attributes. For example;
<label for=“age”>
Enter age:
</label>
<input id=“age” type=“number” min=“10” max=“25” placeholder=“Enter age between 10 and 25”>
CSS:
input:out-of-range{
color: red; border: 1px solid red;
}
:read-only We use this kind of pseudo-class selectors to select and style input and textarea elements that cannot be edited by the user. For example:
input:read-only{
background-color: silver;
}
input:-moz-read-only{ /*backward compatibility for Mozilla browser*/
background-color: silver;
}
:read-write We use this kind of pseudo-class selectors to select and style input and textarea elements that can be edited by users. It can also be used in <p> elements with the
contenteditable=“true” attribute.
Example:
input:read-write{
background-color: yellow;
}
input:-moz-read-write{
background-color: yellow;
}/*backward compatibility for Mozilla browser*/
: required We use this type of pseudo-class selectors to select and style input, select and textarea elements that have the required attribute. E.g.
input:required{
border: blue;
background-color: green;
}
: right We usually use this when setting @page ruleset to represent the right-hand pages when printing a document. e.g.
@page:right{
margin: 2in 2in;
}
:root We use this type of pseudo-class selectors to select the root element in a HTML document. This is the same as using html, but root has higher specificity than html. For example;
:root{
background: #01f001;
padding: 0;
}
It is more useful when we want to declare a global CSS variables, Example:
:root{
--main-color: green;
--pane-padding: 10px 15px;
}:target We use this to select and style links that end with URL fragments with an id. The URL fragment is denoted by a #. For example: See example below.
Note: In the example below, style will be applied when the page is accessed using the URL fragment.
:valid We use this type of pseudo-class selectors to highlight and style form field elements that validate. That is, the correct input is entered in them. It is basically used to highlight successes. See example below.
:visited We use this to select and style the <a> elements that has been visited. For example:
Pseudo-Elements Selector
Pseudo-elements selector is like pseudo-class selectors but they are preceded by double colon “::”. They are used to select and style a particular part of an element, but not the entire element. They include:
::after, ::before, ::first-letter, ::first-line, ::selection, and ::backdrop.
::after – This pseudo-element selector is used to add a last child to the selected element. It is used alongside content and appears inline when rendered. See example below.
::before – Is like the ::after, but is used to create a first child for the element. See example.
::first-letter – We usually use this pseudo-element selector to create a drop cap effect in a paragraph text. It isolates and styles the first letter of the first line in a block. See example below.
::first-line – We use this to select and style the first line of a given text block. See example below.
::selection – This is used to select and apply a style to a group of texts highlighted by a user. See example below. In the example, select a group of text and see the effect.
::backdrop – Is used to select and apply CSS to elements in fullscreen mode.
The embedded code has the examples of all the pseudo elements selector discussed here. The CSS is explicitly commented to distinguish all the examples.
