What are CSS pseudo-classes? Detailed introduction to CSS pseudo-classes-CSS Tutorial-php.cn

Whether you are a beginner or an experienced CSS developer, you have probably heard of pseudo-classes. The most famous pseudo-class is probably :hover, which allows us to style elements while they are in a hover state when a pointing device (such as a mouse) is pointed at it.

Following our previous introduction to margin: auto and CSS Floats, we take a deeper look at pseudo-classes in this article. We'll see what pseudoclasses are, how they work, how we classify them, and how they differ from pseudoelements. (Recommended tutorial: css video tutorial)

What is a pseudo class?

A pseudo-class is an HTML element that we can select a keyword to define a special state in order to add CSS. We can add pseudo-classes to CSS selectors using colon syntax, like this: a:hover{ ... }

A CSS class is something we can add to the HTML we want to apply, with the same styling rules The title attribute of an element, such as a top menu item or a sidebar widget. In other words, we can use CSS classes to group or categorize HTML elements that are similar in some way.

Pseudo classes are similar to them in that they are also used to add style rules to elements that share the same characteristics.

However, while the real class is user-defined and can be discovered in the source code, for example, based on the current state of the HTML element to which it belongs, a UA (User Agent) (such as a web browser) adds < ;div class="myClass">Pseudo class.

Pseudo classes and pseudo elements can be used in CSS selectors but do not exist in HTML source code. Instead, they are "inserted" by the UA under certain conditions for addressing in the style sheet.

Purpose of Pseudo Classes

The job of regular CSS classes is to classify or group elements. Developers know how their elements are grouped: they can form classes like "menu items", "buttons", "thumbnails", etc. to group them, and later style similar elements. These classifications are based on the characteristics of the elements given by the developers themselves.

For example, if a developer decides to use a

as a thumbnail object, they can classify it using the

"thumbnail" class.

<div class="thumbnail">[...]</div>

Copy after login

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

1. An element that is the last child of its parent element. Element

2, visited link

3, a full-screen element.

These are the characteristics that pseudo-classes usually target. To better understand the difference between classes and pseudo-classes, let's assume that we use the class .last to identify the last element in a different parent container.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

Copy after login

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

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

Copy after login

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

The trouble of updating classes can be left to the user agent, at least for those characteristics that are common among elements (and the last element is as common as it can get). Having the predefined :last-child pseudo-class is really useful. This way, we don't have to indicate the last elements in the HTML code, but we can still style them using the following CSS:

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

Copy after login

Main type of pseudo-class

There are many kinds of pseudo-classes, and they all provide us with a way to locate elements based on their characteristics that are inaccessible or difficult to access. This is a list of standard pseudo-classes in MDN.

1. Dynamic pseudo-classes

Dynamic pseudo-classes are dynamically added to and removed from HTML elements based on the state they transition in response to user interaction. Some examples of dynamic pseudo-classes are , , , , and , all of which can be added to anchor tags. :hover:focus:link:visited

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

Copy after login

2. State-based pseudo-class

State-based pseudo-class is added to the element when it is in a specific static state middle. Some of the most famous examples of these are:

:checked can be applied to checkboxes ()

:fullscreen locates the current display in full screen mode Any element

:disabledHTML element can be in disabled mode, such as ,