The pseudo-class [:] and pseudo-element [::] in CSS are pseudo-element selectors that we use in our daily development process. Sometimes we use [:], and sometimes we use [:: ], sometimes it seems like both are OK. Why is this? Today we will take a look at the difference between these two things.
To know their differences, we first need to understand two concepts - pseudo-elements and pseudo-classes.
So what is a pseudo element and what is a pseudo class?
The official definition is this (from W3C):
1. CSS pseudo-classes are used to add special effects to certain selectors.
2. CSS pseudo-elements are used to add special effects to certain selectors.
At first glance, this concept seems too convoluted. But don't worry, we carefully looked at two important keywords appearing in both concepts: selector and special.
Needless to say, selectors, these two things are used by us to select certain elements ;
Special means that both of these things can do things that cannot be done with other CSS ;
And one thing they all have in common is that they are all selected based on the selector of the previous layer , that is, their use must have elements that have been selected by the previous layer for them to operate.
Looking at it this way, we can actually roughly understand what their role is:
Pseudo class
A pseudo-class is actually a selector. Like the original class, it can be applied to all elements. As long as the corresponding pseudo-class is added to the element, the difference from the traditional class is that it is predefined in the standard. , will not be reflected in the document flow , and there will only be a few of them;
Common pseudo-classes:
(status class):link/:hover/:active/:focus/:visited
(structure class):first-child/:last-child/:nth-child/:nth-last-child/: only-child/:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-of-type/:not/:target/:empty
( Form class):disabled/:enabled/:required/:optional/:read-only/:read-write/:default/:valid/:invalid/:focus (text class):placeholder-shown (selection class)
:
checked /:indeterminate
(number class):in-range/:out-of-range
Example:
For example, if we want the div to display a special style when the mouse cursor slides over it, we need to use the :hover pseudo-class selector.
//html
<div>我是文字，鼠标滑过我，字体颜色变成红色</div>
//css样式
div:hover {
color: red
}Pseudo element
Just like its name, a pseudo-element can essentially be equivalent to an element. However, this element is special in that it does not exist in ordinary document trees. It is just an abstraction based on the element. It is like an incorporeal soul that is only used when needed. It appears somewhere , such as the first letter or the first line of the element content, and the special state it targets is different from that of pseudo-classes. Its operation level is one level deeper than pseudo-classes, so its dynamic nature is higher than that of pseudo-classes. much lower;
Common pseudo-elements:
::after/::before/::first-letter/::first-line
::selection/:placeholder
Pseudo elements exist in any tag, they exist naturally, and they can be modified using CSS for our use.
Example:
If you want to add a copy "I am div" after the copy displayed in each div tag rendered on the page, you can do this:
//css样式
div::after {
content: 我是div
}This is simpler than adding these words to the HTML structure of each div, and it eliminates a lot of redundant code. Of course, in development, we generally don't use pseudo elements to do this work. After all, it's too stupid. We usually use pseudo elements to add a triangle to a certain div, or use pseudo elements to clear floats.
But in fact, pseudo-elements can also be represented by single quotes, which is how they were used when they were first created. However, in order to distinguish them from pseudo-classes, the official recommendation was to use double colons [::] for pseudo-elements. Because of this, when dealing with browser compatibility issues, using a single colon for pseudo-elements can provide better backward compatibility.
Summarize
1. Pseudo-element creates a new element, and the pseudo-class itself exists but does not require special declaration. You can use it when needed;
2. Generally, those with single colons are pseudo-classes, and those with double colons are pseudo-elements; but some pseudo-elements can also use single colons, and when backward compatibility is required, it is recommended to use pseudo-elements first. Single colon, in other cases, it is recommended to always use double colon to distinguish pseudo classes;
3. Only one pseudo element can be used at the same time, and multiple pseudo classes can be used at the same time.