In CSS, a pseudo-class is a term that is appended to a selector to specify an element's unique state. A colon (:) is used to separate a pseudo-class name from other classes.
By categorising the pseudo-classes into the following three types, we may better understand them:
Input pseudo-classes
Location pseudo-classes
Tree-structural pseudo-classes
1. Input pseudo-classes
i. :focus and :checked
:focus choose the input element with focus.
:checked selects each checked input field value.
In this example,
input:focus Any input element that the user selects is immediately styled.
input[type='radio']:cehcked If radio buttons are checked, it styles.
ii. :disabled and :enabled
:disabled selects each input field that is disabled.
:enabled select each input field that is enabled.
In this example,
input:disabled Every input element is enabled by default; however, in this example, we specifically disabled the email input and used a pseudo-class to check for any disabled elements on our website and style them.
input:enabled This pseudo class verifies all input elements and styles those that are enabled.
iii. :required and :optional
:required identifies input items that have a required property and selects them.
:optional identifies input items that have a optional property and selects them.
In this example,
input:required identifies and styles each required input element in the webpage.
input:optional identifies and styles each optional input element in the webpage.
iv. :in-range and :out-of-range
:in-range picks out input items whose values fall inside a certain range.
:out-of-range determines which input elements have values that fall outside of a certain range.
In this example,
input:in-range In this example we set the input range of age as 18-50 whenever a user enters in between ranges then it styles.
input:out-of-range In this example we set the input range of age 18-50 whenever a user enters outside the range then it styles.
v. :read-only and :read-write
:read-only chooses input elements that have the read-only attribute set.
:read-write chooses input elements that have the read-write attribute set.
In this example,
input:read-only The input element is found and styled that have a read-only attributes.
input:read-write When an input element is defined, by default, it has the attribute read-write, thus when the style is applied, all input elements receive style.
vi. :valid and :invalid
:valid Choose every input field that has a valid value.
:invalid Choose every input field that has an invalid value.
In this example,
input[type='email']:invalid When a user enters incorrect data in the email input field, the style is applied.
input[type='email']:valid By default, the input type email is valid; however, when the valid input data is typed again, the style changes.
2. Location pseudo-classes
i. :link
selects all links that have not been visited
ii. :active
while the user is activating an item, matches.
iii. :visited
URLs that match the ones that have been visited.
iv. :hover
When a user points at an object with a pointing device, for as by hovering the mouse cursor over it, the object matches.
In this example,
The colour of the link changes depending on whether it is visited or not. When the link is not visited, it is green; when it is visited, it is red; when it hovers over, it is white; and when the link is active, it is yellow.
3. Tree-structural pseudo-classes
i. :first-child and :last-child
:first-child matches a sibling element that is the first in the family.
:last-child matches a sibling element that is the last in the family.
In this example,
div.container p:first-child: we choose the container's first child to be a paragraph, but the container's first child is not a paragraph, so the style is not changed. It looks for the first nested div box 1 and determines if the first child is a paragraph or not, but it is unable to locate it. Next, in the second nested div box 2, the search begins by determining whether the first child is a paragraph, and once it gets, the style is changed.
div.container p:last-child: we choose the container's last child to be a paragraph, but the container's last child is not a paragraph, so the style is not changed. It looks for the first nested div box 1 and determines if the last child is a paragraph or not, and yes the last child is a paragraph so the style got changed. Next, in the second nested div box 2, the search begins by determining whether the last child is a paragraph, and once it gets, the style is changed.
ii. :nth-child() and :nth-last-child()
:nth-child() matches a sibling element that is present in the nth position inside each parent element.
:nth-last-child() matches a sibling element that is present in the nth position from the last inside each parent element.
In this example,
div.container p:nth-child(4): we choose the container's nth-child i.e. 4th-child to be a paragraph, but the container's 4th-child is not a paragraph, so the style is not changed. It looks for the first nested div box 1 and determines if the 4th child is a paragraph or not, and yes the 4th child is a paragraph so the style got changed. Next, in the second nested div box 2, the search begins by determining whether the 4th child is a paragraph, Since the 4th paragraph is missing, nothing changed.
div.container p:nth-last-child(3): we choose the container's nth-child from last i.e. 3rd child from last to be a paragraph, but the container's 3rd child from last is a paragraph, so the style got changed. It looks inside the first nested div box 1 and determines if the 3rd last child is a paragraph or not, and it finds and changed the style. Next, in the second nested div box 2, the search begins by determining whether the child from the last 3rd is a paragraph, and once it gets, the style is changed.
iii. :first-of-type and :last-of-type
:first-of-type selects the first item of each parent element.
:last-of-type selects the last item of each parent element
In this example,
div.container p:first-of-type: We select the first type of the paragraph in the container and apply a style to it. It also looks inside the nested div to see whether there is a paragraph and styles the first paragraph.
div.container p:last-of-type: We select the last type of paragraph in the container and apply a style to it. It also looks inside the nested div to see whether there is a paragraph and styles the last paragraph.
iv. :nth-of-type() and :nth-last-of-type()
:nth-of-type() selects the nth item of type from each parent element.
:nth-last-of-type() selects the nth item of type from the last of each parent element
In this example,
div.container p:nth-of-type(3): We select the nth-of-type i.e. 3rd-of-type paragraph in the container and apply a style to it. It also looks inside the nested div to see whether there is a 3rd paragraph and styles it.
div.container p:nth-last-of-type(2): We select the nth-last-of-type i.e. 2nd-last in the type of paragraph from the container and apply a style to it. It also looks inside the nested div to see whether a paragraph is present in the 2nd last type of paragraph and then styles it.
v. :only-of-type and :only child
:only-of-type Identifies and chooses each element that is the only one in its parent.
:only-child Selects every element that is the only child of its parent.
In this example,
div.container :only-of-type: We look for the specific type of element in every parent class underneath the container class and styled it.
div.container :only-child: The element that is the only child of the parent class is found and styled inside the container classes.
vi. :empty and :not
:empty selects all elements with no children and no content inside them.
:not(selector) chooses all elements that are not selector elements.
In this example,
div.container :empty: The container class looks for empty elements. When it discovers the p element is empty in the container class, it styles it.
div.box1 :not(p): Other than p, all of the elements in box1 were styled.
We've come to the conclusion of the topic and have learned everything there is to know about pseudo-classes.
Happy Learning😊