CSS Pseudo-Classes: Complete Guide

Example Nth-Pseudoclass Case 1

Hello friends today we gonna learn about CSS Pseudo-Classes: Complete Guide. So read this article, CSS Pseudo-Classes: Complete Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: CSS Pseudo-Classes: Complete Guide

Whether you’re a beginner or an experienced CSS developer, you’ve probably heard of it pseudo classesProbably the most famous pseudo class is hover, which allows us to style an element when it’s in the floating stateie when a pointing device, such as a mouse, is pointed at it.

Following the concept of our earlier posts on margin: auto and CSS Floats, we’ll take a closer look at pseudo classes in this post. We shall see what pseudo classes really are, how they work, how we can categorize them, and how they differ from pseudo-elements

back to menu ↑

What are Pseudo Classes?

A pseudo-class is a keyword that we can add to CSS selectors for define a special state of the corresponding HTML element. We can add a pseudo class to a CSS selector by using the colon syntax : like this: a: hover {…}

A CSS class is an attribute that we can add to HTML elements for which we want to apply the same style rules, such as top menu items or sidebar widget titles. In other words, we can use CSS classes to convert Group or classify HTML elements that are somehow similar.

Pseudo-classes are similar to them in the sense that they are used to add style rules to the elements that share the same attribute

But while real classes are user-defined and can be seen in the source code, for example

, are pseudo classes added by UA (user agents), such as web browsers, based on the current state of the corresponding HTML element.

back to menu ↑

Purpose of pseudoclasses

The job from regular CSS classes is on classify or group elementsDevelopers know how to group their elements: they can form classes such as “menu items”, “buttons”,“ Thumbnails ”, etc. To group similar elements and format them later. These classifications are based on the characteristics of the elements that are given by the developers themselves

For example, if a developer decides to use a

as a thumbnail object, he or she can use it

classify with a “thumbnail” class.

[…]

However, HTML elements have their own common features based on their state, position, nature and interaction with the page and the user. These are the characteristics that are not typically marked in the HTML code, but we can target them with pseudo classes in CSS, for example:

  • an element that is the last child within the parent element
  • a link that is visited
  • an element that has disappeared in full screen.

These are the kind of characteristics that the pseudoclasses are usually targeted at. To better understand the difference between classes and pseudo-classes, let’s assume we use the class .last to identify the last elements in different parent containers.

  • item 1
  • item 2
  • item 3
  • item 4

We can style these last child elements with the following CSS:

li.last {text-transform: capital letters;}

option.last {font-style: italic;}

But what happens if the last element changes? Well, we will have to move the class .last from the previous last element to the current one.

This hassle of updating classes can be left to the user agent, at least for those characteristics that are common among elements (and being the last element is as common as it can get). To have a predefined: last-child pseudo-class is very useful indeed. In this way we can does not have to indicate the last element in the HTML code, but we can still format them with the following CSS:

li: last-child {text-transform: capital letters;}

option: last-child {font-style: italic;}

back to menu ↑

Main types of pseudo classes

There are many types of pseudo classes, they all provide us with ways to target elements based on their features that are otherwise inaccessible or more difficult to access. Here is a list of standard pseudoclasses in MDN.

back to menu ↑

1. Dynamic pseudo classes

Dynamic pseudo classes are added to and removed from HTML elements dynamic, based on the state into which they pass in response to the user’s interactionsSome examples of dynamic pseudoclasses are: hover ,: focus ,: link, and: seen, all of which can be added to the anchor tag.

a: visited {color: # 8D20AE;}.button: float ,.button: focus {font-weight: bold;}

back to menu ↑

2. State-based pseudo-classes

State-based pseudo-classes are added to elements when they are in a certain static stateSome of the most famous examples are:

  • : checked that can be applied for checkboxes ()
  • : full screen to target any element currently displayed in full screen
  • : Disabled for HTML elements that can be in disabled mode, such as ,