Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "CSS pseudo-class" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is CSS pseudo-class" article.

What is a pseudo class?

A pseudo class is a HTML element that we can select a keyword to define a special state in order to add CSS. We can use colon syntax to add pseudo-classes to the CSS selector, as follows: a:hover {...}

A CSS class is the title attribute that we can add to the HTML we want to apply for the same style of rule elements, such as top menu items or sidebar gadgets. In other words, we can use the CSS class to group or classify HTML elements that are similar in some way.

Pseudo classes are similar to them because 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 found in the source code, for example, a UA (user agent) (such as a web browser) adds pseudo-classes based on the current state of the HTML element to which it belongs.

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

The purpose of pseudo-class

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

For example, if the developer decides to use an as the thumbnail object, he can use the thumbnail class to classify it.

[...]

However, HTML elements have common characteristics based on their state, location, nature, and interaction with pages and users. These are features that are not normally tagged in HTML code, but we can use pseudo-classes in CSS to locate them, such as:

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

2. Links to visit

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 this class .last to identify the last element in a different parent container.

Item1

Item2

Item3

Item4

Option1

Option2

Option3

Option4

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

Li.last {

Text-transform:uppercase

}

Option.last {

Font-style:italic

}

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 hassle of updating the class can be left to the user agent, at least for those common features in the element (and the last element is the common element it can get). It's really useful to have predefined: last-child pseudo-classes. In this way, we don't have to indicate the last element 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

}

Main types of pseudo classes

There are many kinds of pseudo classes, all of which provide us with a way to locate elements based on features that are inaccessible or inaccessible. This is a list of standard pseudo classes in MDN.

1. Dynamic pseudo class

Dynamic pseudo-classes are dynamically added to and removed from the HTML element based on the state they transform 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

}

two。 State-based pseudo-class

State-based pseudo-classes are added to the element when they are in a particular static state. Some of the most famous examples are:

: checked can be applied to the check box ()

: fullscreen locates any elements currently displayed in full screen mode

: disabledHTML element, which can be in disabled mode, such as, and.

The most popular state-based pseudo class must be: checked, which marks whether the check box is selected.

.checkbox: checked+label {

Font-style:italic

}

Input:disabled {

Background-color:#EEEEEE

}

3. Structural pseudo class

Structural pseudo-classes classify elements according to their position in the document structure. Its most common examples are: first-child,:last-child and: nth-child (n)-both can be used to locate specific child elements within the container based on the location of the container-and: root it targets the highest-level parent element in the DOM.

4. Miscellaneous pseudo classes

There are also some miscellaneous pseudo-classes that are difficult to classify, such as:

: not (x) selects elements that do not match selector x

: lang (language-code) selects which content uses language-specific elements

: dir (directionality) selects elements with given directional content (left-to-right or right-to-left).

P:lang (ko) {

Background-color:#FFFF00

}

: root {

Background-color:#FAEBD7

}

The nth of nth-child and type Pseudo-Classes

One of the hardest things about pseudo-classes is the possible difference between nth-child and: nth-of-type pseudo-classes.

Both are structural pseudo-classes and mark specific elements within the parent element (container), but in different ways.

Suppose nth-of-child is 2, then: nth-of-child (n) targets the second child of its parent element, and: nth-of-type (n) targets the second parent element of the same type of component (e.g. paragraph) in the element.

Let's look at an example.

/ * aparagraphthat'salsothesecondchildinsideitsparentelement*/

P:nth-child (2) {

Color:#1E90FF;//lightblue

}

/ * thesecondparagraphinsideaparentelement*/

P:nth-of-type (2) {

Font-weight:bold

}

Let's take a look at how this short CSS style uses HTML in two different situations.

Case 1

In case 1, the second element in an is an unordered list, so the nth-child (2) rule does not apply to it. Although it is the second child element, it is not a paragraph.

However, if the parent element does have a second paragraph, the nth-of-type (2) rule will apply because it will only find

Element, regardless of other types of elements within the parent element (such as an unordered list).

In our example, the nth-of-type (2) rule sets the second paragraph, child 3.

Paragraph2,Child1

UnorderedList1,Child2

Paragraph3,Child3

The above is the content of this article about "what is the pseudo-class of CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.