This is the sixth day of my participation in Gwen Challenge
Pseudo elements and pseudo classes
pseudo-classes
A pseudoclass is a selector that selects elements in a particular 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 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 two
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 differentiate CSS writing, pseudo-classes are typically single colons, such as ==:hover==, and pseudo-elements are double colons ==::after==
pseudo-classes
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 |