Pseudo Classes in CSS - Scaler Topics

Overview

A pseudo-class in CSS is a keyword that defines the special state of an element. It is used to apply special effects on an element on performing certain actions. A pseudo-class is applied on a selector for adding a special effect on the basis of a particular state of an element.

What are CSS Pseudo-Classes?

I am pretty sure everyone must have noticed the different behaviour of some elements on a web page when we perform a specific action on them. For instance, when we hover(move the mouse cursor over something) over a button, we see the change in the colour of the button or while filling a form, the text-box in which we are entering the details has a different appearance than the other text boxes.

Besides this, we often see that when we click over a link and visit it, its original colour is changed. Is it all magic? Well, the answer is No. This is a property of CSS which allows us to define a state of an element when we perform a certain action on them. This can be achieved using pseudo classes in CSS.

A pseudo-class in CSS is a keyword which defines the special state of an element. A special state includes hovering, clicking, focus, selecting an element etc. A pseudo-class is applied on a selector(they are used to select the content you want to style) for adding a special effect on the basis of a particular state of an element.

Syntax:

Here the selector is the element on which we have to perform the action. CSS property is used to style an aspect of an HTML element.

The Important Pseudo Classes in CSS

CSS :link pseudo-class

The pseudo class is used to set the style of the unvisited element. The word unvisited means the user has not been or visited to that page or element. Let us say if you want the appearance of an unvisited link to be different, you can use the link pseudo class. It represents an element that has not yet been visited.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

The above example sets the colour of all the <a> tags which are not yet visited as green. This will work for the <a> tags which are used to add links. The example looks like this-

link pseudo-class

CSS :Visited Pseudo-Class

The pseudo class is used to set style of the visited elements/ links. The word visited means the user has been to or visited to that page or element. This pseudo class allows only a certain styles to be applied on the selector due to the privacy reasons of browsers.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

The above example sets the colour of all the <a> tags which are visited as darkblue. The example looks like this-

visited pseudo-class

CSS :Hover Pseudo-Class

If you are unfamiliar with the term hover, we will help you to understand the same. Hover means to move the mouse cursor over something.

The :hover pseudo class is used to style an element when the user hovers over that element. This will only work when the user hovers over it. One thing to note is that hover pseudo class may not work properly on touchscreen devices as there no option of mouse hover.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

When the user hovers any button, its background colour changes to crimson. hover-pseudo-class

CSS :Active Pseudo-Class

The pseudo class come into picture when the user clicks or activates the state of a particular element. While using a mouse, the activation typically means when the user presses the primary mouse button.

It is commonly used on <a> and <button> tags.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

This will change the colour of all the <p> elements when the user clicks on it. The example looks like this-

active-pseudo-class

Note: It is important to note that while defining the link, visited, hover and active pseudo classes, we need to maintain a fixed order according to their specificity as, if we violate the order(if we want to define all of them together) then the pseudo class whose specificity is less will be overridden by the one which has a higher specificity.

The decreasing order of specificity is as follows- The acronym is LVHA-order: :link — :visited — :hover — :active.

CSS :Any-Link Pseudo-Class

The pseudo class represents an element which has the href attribute set. A hyperlink is an element that accepts and contains a href attribute and if we want to select it, we will have to use the any-link pseudo-class. It is a convenient way of selecting all the link-based elements.

Now you might wonder why can't we use the pseudo class simply. The answer is the pseudo class excludes the pseudo class's links so for collecting them, we use the any-link pseudo class. When we use the pseudo class, it only selects the unvisited links and when we use the pseudo class it only selects the visited links. Hence the pseudo class is used to select all the links.

Syntax

The syntax sets the pseudo class for rendering the desired properties.

Example

It will select all the links and style them irrespective of whether they are link pseudo class or visited pseudo class. The example looks like this- any-link pseudo-class

CSS :Target Pseudo-Class

The pseudo class represents the target element with an id matching the URL's fragment. A fragment is an internal page reference. It usually appears at the end of a URL and begins with a hash (#) character followed by an identifier.

It is used to represent an element that has id attribute set to a name that is matching the fragment identifier that follows the '#' sign. Consider if you are at URL www.xyz.com/#home then the selector #home will match.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

The HTML and output looks like this-

target-pseudo-class

Explanation- Here we have set the id "#target" and when we click the link, it sets the CSS for the target tag.

CSS :First-Child Pseudo-Class

The pseudo class is used to select the first element of the parent. It selects the first child of the parent. This is very useful to style lists.

Consider the example for understanding the concept of parents and children.

 <div>
      <p>This paragraph is the first child of its parent</p>
      <p>This paragraph is the second child of its parent</p>
</div>

Here the parent is the <div> tag and the <p> tags are the children.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Consider the example where you want to style every first <li> element in the list. Then we will use the first-child pseudo class.

This will make the colour of the first list-item as crimson.

first-child-pseudo-class

CSS :last-Child Pseudo-Class

The last-child pseudo class is used to select the last element of the parent.

This is also very useful to style lists.

Syntax

Consider the example where you want to style every last <li> element in the list. Then we will use the last-child pseudo class.

This will make the colour of the last list-item as orange.

last-child-pseudo-class

CSS :Focus Pseudo-Class

The focus pseudo class is used to represent a element that has received focus. An element is said to have received focus when the user clicks on it. This is generally applied on form-inputs.

Syntax

Example

This will set the background colour of the input as sandybrown.

focus-pseudo-class

CSS :Focus-Within Pseudo-Class

The focus pseudo class is used to select an element if the element or any of its children are focused. In simple words, it selects an element if that element contains any children that have .

Syntax

Example

So, it works in the following way.

focus-within-pseudo-class

The remaining area of the form gets selected and its colour changes to green. Here as the form is the parent, we have applied the pseudo class to it. If the input has its own pseudo class, then if we focus on the input field, then the gets activated for the parent element.

CSS :Lang Pseudo-Class

The pseudo class is used to select elements with a lang attribute having a specific value.

The lang attribute specifies the language of the element's content. It is mostly a two-letter language code like 'en' for English and 'fr' for French. This is generally used for the <q> tag.

The <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.

This pseudo class is useful when we want our document in multiple languages. Some of the language have different writing conventions for example, in French, the angle brackets (<>) are used for quoting purposes and in English we use the double inverted commas (" ").

Syntax

The syntax shows the pseudo class which takes the language code as an input.

Example

Here, we have set the quotation mark for both English and French language using the quotes property. It is used to set the type of quotation marks for quotations. The example looks like the following.

lang-pseudo-class

CSS :Checked Pseudo-Class

The pseudo-class is used to represent the <input> elements (only checkboxes and radio buttons) and <option> elements which are in enabled state. Checkbox and radio elements can be toggled i.e.,on and off by the user.

Syntax

As mentioned above, here the selector will only be checkboxes, radio buttons and the <option> element.

Example

checked-pseudo-class

Here you can see in the above image, that after checking the box, the font-weight becomes bold as we have defined in the CSS.

CSS :Default Pseudo Class

The pseudo class in CSS is used to match a group of associated elements. It will only work for <button>, checkboxes, radio buttons and the <option> element. <input type="checkbox"> and <input type="radio"> match if they have the checked attribute in their HTML.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties. Example

default-pseudo-class

The HTML for applying 'checked' looks like this.

Here the default option was boy so it got the properties defined in CSS. We had mentioned checked in HTML of the input to make it default.

CSS :Disabled Pseudo Class

The disabled pseudo class is used to represent a disabled element. An element is said to be disabled if the user cannot activate it(select, focus, type, click it etc.).

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

disabled-pseudo-class

Here the input has been disabled. In order to do so, we have to mention disabled in the input. The HTML is shown below so that you get an idea where to mention 'disabled' in HTML.

CSS :enabled Pseudo Class

The enabled pseudo class is the opposite of the disabled pseudo class. It is used to represent an enabled element. An element is said to be enabled if the user can activate it(select, focus, type, click it etc.).

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

CSS :empty Pseudo Class

The enabled pseudo class is used to represent any element that does not have any children. Children can be any nodes or text.

Consider the example to understand an element without a child.

As you can see the <div> tag doesn't have any children.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

css-empty

Here, we have applied the empty pseudo class to the div selector. The HTML looks like this.

We have set the height and the width of the div so that it is visible. There are two divs. the first one is empty so its background colour becomes green. Whereas the other has a child which is text here, it remains the same.

CSS :First-of-Type Pseudo Class

The first-of-type pseudo class represents the first element of a given type among the sibling element. If we have a heading and two paragraphs written inside a div, the heading is said to be the first of type-paragraph. This is the same as (1). We will discuss the pseudo class later in this article.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties.

Example

css-first-of-type Here you can see that the first among all the <h2> tags has been selected.

CSS :last-of-type Pseudo Class

The pseudo class is used to represents the last element of a given type among the sibling element. This is the same as (1). We will discuss the pseudo class later in this article.

Syntax

The syntax uses the pseudo class on a selector for setting the desired properties. Example

css-last-of-type

Here you can see that the last among all the <h2> tags has been selected.

CSS :in-range Pseudo Class

The pseudo class represents an <input> element whose value is within the specified range. For specifying the range, we use the max and the min attribute. If the value lies between min and max attributes specified, it is said to be within range. This only works for the input elements which have the min and/or max attribute.

Syntax

The syntax uses the pseudo class on the input tag for setting the desired properties.

Example

css-in-range

We have specified the min and max attribute for the input tag like this-

Here you can see that since the input is within range, the CSS defined for in-range pseudo class is rendered.

CSS :invalid Pseudo Class

The pseudo class represents the <input> and form elements with a value that does not validate according to the settings mentioned for the elements. Like the pseudo class, we need to specify the limitations like the min and max attribute for the input tag etc.

Syntax

The syntax uses the pseudo class on the input tag for setting the desired properties. Example

css-invalid

We have specified the min and max attribute for the input tag like this-

Here you can see that since the input is invalid, the CSS defined for pseudo class is rendered.

CSS :not() pseudo class

The pseudo class is used to match an element that is not represented by the argument. It represents elements that do not match a list of selectors. It prevents an element from being styled.

Syntax

The syntax uses the pseudo class on one selector and takes another selector as an argument for which we don't want the styling to be done.

Example

Selects the elements which are not of the class .ip in the <p> elements. The HTML and the output are as follows-

css-not

Here you can see that only the <p> tag which does not have the .ip class has been selected.

CSS :nth-child Pseudo Class

The pseudo class is used to match elements among its siblings. So it matches a elements based on the position among a group of elements.

Syntax

Here n can be a number, keyword or formula. The syntax uses the pseudo class on the selector to set the desired properties.

Example 1- using a keyword

Here odd represents the 1st,3rd,5th.... children from the start while even represents 2nd, 4th, 6th.... from the start.

css-nth-child-using-a-keyword

Here one thing to note is that always the index of the first child is 1. We can see that for the odd <h2> tag the colour is magenta while for the even <h2> tag the colour is cyan.

Example 2- using a number

css-nth-child-using-a-number Here the 2nd child is chosen and its colour is changed to brown.

Example 3- using a formula

Syntax

Here, a represents the cycle size, n represents a counter which starts at 0 andbrepresents the offset value.

css-nth-child-using-a-formula Here we have made some changes in the HTML and replicated the above <h2> tag twice.

Here a=2 and b=1, for every value of n starting from 0, the CSS gets applied to the mentioned formula.

CSS :nth-last-child Pseudo Class

The pseudo class is used to match every element that is the nth-child of its parent(irrespective of its type) beginning from the last child.

Syntax

Here n can be a number, keyword or formula. The syntax uses the pseudo class on the selector to set the desired properties.

Example 1- using a keyword

Here odd represents the 1st,3rd,5th.... children from the end while even represents 2nd, 4th, 6th.... from the end.

nth-last-child-using-a-keyword

Example 2- using a formula

Syntax

Here, a represents the cycle size, n represents a counter which starts at 0 and b represents the offset value.

The output is shown below. nth-last-child-using-a-formula

Here we have made some changes in the HTML and replicated the above <h2> tag twice.

Here a=2 and b=2, for every value of n starting from the last child, the CSS gets applied to the mentioned formula.

CSS :nth-last-of-type Pseudo Class

The pseudo class is used to match every element that is the nth-child of a particular type beginning from the last-child.

Syntax

Here n can be a number, keyword or formula. The type of example is similar to the above two pseudo classes, we will discuss only one example.

Example

css-nth-last-of-type Here after starting from the end, the even child is rendered the cyan colour.

CSS :nth-of-type Pseudo Class

The pseudo class is used to match every element that is the nth child(of a particular type) of its parent. Syntax

Here n can be a number, keyword or formula. The syntax uses the pseudo class on the selector to set the desired properties.

Example

css-nth-of-type Here after starting from the start, the even child is rendered the cyan colour.

CSS :only-child Pseudo Class

The pseudo class is used to represent the only child of the parent element i.e., an element without any siblings.

To understand the concepts of children and parent, let us look at the example below.

The first div has only one <p> tag which is its single child whereas the second div has two <p> tags which states it has two children.

Syntax

The syntax uses the pseudo class on the selector to set the desired properties.

Example

Here the HTML and the output is as follows-

css-only-child Here the first div has only one child so the pseudo class got rendered, while for the second div, there are two children, hence it remains the same.

CSS :only-of-type Pseudo Class

The pseudo class is used to represent an element that has no siblings of the given type. It is useful to style elements which do not have siblings of the same type and it is the only one of its type.

Syntax

The syntax uses the pseudo class on the selector to set the desired properties.

Example

css-only-of-type

In the above image, we can see that the <h2> tag is the only of type <h2> so the CSS gets rendered.

CSS :optional Pseudo Class

The pseudo tag is used to represent <input>, <select>, or <textarea> element which do not have the required attribute defined for them. Syntax

The syntax uses the pseudo class on the selector to set the desired properties.

Example

The HTML and the output is as follows-

css-optional

Here we can see the input field which does not have the required attribute gets the CSS defined in the pseudo class.

CSS :out-of-range Pseudo Class

The pseudo class is used to represent an <input> element whose value is outside the specified range. This only works for the input elements which have the min and/or max attribute.

Syntax

The syntax uses the pseudo class on the input tag to set the desired properties.

Example

css-out-of-range

We have specified the min and max attribute for the input tag like this-

Here you can see that since the input is outside range, the CSS defined for out-of-range pseudo class is rendered.

CSS :read-only Pseudo Class

The pseudo is used to represent elements that are Read Only in terms of its content. They can't be edited. It is important to set the "readonly" attribute for the input in the HTML.

Syntax

The syntax uses the pseudo class on the input tag to set the desired properties.

Example

The HTML and the output looks like this-

css-read-only

CSS :read-write Pseudo Class

The pseudo is used to represent elements that is editable by the user. The input tag is editable by default that means its contents can be changed.

Syntax

The syntax uses the pseudo class on the input tag to set the desired properties.

Example

css-read-write

CSS :required Pseudo Class

The pseudo class is used to select the <input>, <select>, or<textarea> element for which we have defined the required attribute in HTML. It is the opposite of the pseudo class.

Syntax

The syntax uses the pseudo class on the selector to set the desired properties.

Example

The HTML and the output is as follows-

css required

Here we can see the input field which does have the required attribute gets the CSS defined in the pseudo class.

CSS :root Pseudo Class

The pseudo class is used to match the document's root element. In HTML, the root element is always the <html> element. Syntax

The syntax uses the pseudo class for the entire HTML page.

Example

css root

CSS :valid Pseudo Class

The pseudo class is used to represent the <input> or <form> elements whose contents are validated successfully. If the contents of the tag are matching the attributes that we have set, they are considered as valid. Syntax

We have used the pseudo class for the input tag which is a selector here. Example

css valid

We have specified the min and max attribute for the input tag like this-

Here you can see that since the input is valid, the CSS defined for the invalid pseudo class is rendered.

Pseudo Class Selectors

A pseudo-class selector is a type of selector that selects elements based on its specific state. The table below represents the type of pseudo class selector and their examples.

Type	Example
Link-related pseudo class selectors	, , ,
Input & link related pseudo class selectors	, , , , , , , ,
Position/Number-based pseudo class selectors	, , , , , , , ,
Relational pseudo class selectors	,
Text-related pseudo class selectors

Conclusion

A pseudo-class in CSS is a keyword which defines the special state of an element.
A pseudo-class is applied on a selector for adding a special effect on the basis of a particular state of an element.
There are various pseudo classes in CSS explained above.
A pseudo-class selector is a type of selector that selects elements based on its specific state.
The most popular applications include changing styles on hovering, focusing on an input, distinguishing visited and unvisited links, beautify the inputs etc.