preface
Recently look at some front end questions, often asked about the role of pseudo-class and pseudo-element and the difference between the two, so deliberately find some information to learn. The following is my understanding and summary of this aspect of knowledge, there may be omissions or some discrepancies, welcome to correct, mutual exchange ~
pseudo-classes
A psuedo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.
A pseudo-class is a selector that selects elements in a specific state, such as the first element of a CLSSS, an element to hover, etc. , we can think of it as a specific CSS class, but unlike a normal class, it can only style elements in a state that the DOM tree cannot describe, so it is called a pseudo-class
Pseudo elements
Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon ::
Pseudo-elements are similar to pseudo-classes, but are similar to adding a new DOM node to the DOM tree, rather than changing the state of the element. Note that this is analogous rather than actually adding a node, which is why it is called a pseudo-element (essentially, the element is created outside the document).
The difference between
The key difference between a pseudo-class that operates on an existing element in the document and a pseudo-element that creates an element outside the document is this. In addition, to distinguish CSS writing, pseudo-classes are typically single colons, such as :hover, while pseudo-elements are double colons ::before. In general, single colons are mandatory for most pseudo-classes, and both single and double colons are acceptable for most pseudo-elements, but it is recommended to follow the specification for distinguishing.
What are pseudo classes and pseudo elements?
- pseudo-classes
| The selector | role |
|---|---|
| :avtive | Match elements activated by the user (such as clicks) |
| :blank | Matches an empty input |
| :checked | Matches the selected radio or checkbox |
| :disabled | Matches interactive elements that are in an unavailable state |
| :empty | Matches elements that have no child elements |
| :enabled | Matches the interactive elements in the available state |
| :first-child | Matches the first sibling element |
| :first-of-type | Matches an element whose sibling elements are the first of a type |
| :focus | Matches the element that gets focus |
| :focus-visible | Matches elements that get focus and can be seen by the user |
| :hover | Matches the elements that the user hovers or touches here |
| :invalid | Matches elements in an illegal state, such as<input>The regular check fails |
| :lang | Matches elements according to the document language |
| :last-child | Matches the last element in the sibling element |
| :last-of-type | Matches an element whose sibling element is the last in a type |
| :link | Matches links that have not been visited |
| :is() | Matches the elements that match the result |
| :not() | Matches elements that do not match the result |
| :nth-child(n) | Matches the NTH child of the parent element. N can be a number, a keyword, or a formula |
| :nth-of-type(n) | The NTH child of an element of a type that matches the parent element. N can be a number, a keyword, or a formula |
| :nth-last-child(n) | Like nth-child(), count backwards |
| :nth-last-of-type(n) | Like nth-last-type-child (), counting backwards |
| :only-child | Matches elements that have no sibling elements |
| :only-of-type | Matches an element that is the only type of its sibling element. |
| :placeholder-shown | Matches the form element that displays the default placeholder |
| :required | Matches mandatory form elements |
| :root | Matching the root element |
| :valid | Matches elements in a valid state |
| :target | Matches the anchor element that matches the current URL |
| :visited | Matches the elements that have been accessed |
- Pseudo elements
| The selector | role |
|---|---|
| ::before | Matches the area that appears after the actual content of the original element |
| ::after | Matches the area that appears before the actual content of the original element |
| ::first-letter | Matches the first letter of the element |
| ::first-line | Matches the first row of the element |
| ::selection | Matches the selected text or region |
The resources
- MDN, Pseudo-classes_and_pseudo-elements
- AlloyTeam, summarizing pseudo classes and pseudo elements