A summary of pseudo-class and pseudo-elements in CSS

CSS in the pseudo-class and pseudo-elements are always confused, today reference a lot of information, also looked at some of the documents, now the pseudo-class and pseudo-elements summarized as follows:

First, the Origin:

Pseudo-class and pseudo-elements are introduced because some information in the document tree can not be adequately described, such as the CSS does not have "the first line of the paragraph", "article initials" and other selectors, which in some of the publishing scene is necessary, this situation arises. Reference to the standard words:

Information that lies outside the document tree.
(CSS introduces the concept of pseudo-classes and pseudo-elements in order to implement formatting based on information outside of the document tree.) ）

It appears to describe something that the existing CSS cannot describe.

Second, the difference between pseudo-class and pseudo-elements:

1, the object of the pseudo-class is an existing element in the document tree, while the pseudo-element creates an element outside the document number;

2, the CSS3 specification requires the use of double colons (::) to represent pseudo-elements, to differentiate between pseudo-elements and pseudo-classes.

However, because IE8 and some of the following browsers are not compatible with double colons (::) to represent the method, the remaining pseudo-elements can use either a single colon (:) or a double colon (::)) In addition to a few pseudo-elements.

Quote from the standard:

To set them apart from pseudo-classes. Sometimes in CSS. CSS3 however also still allows

Stick with this syntax for the time being.
(Probably meaning: Although the CSS3 standard requires pseudo-elements to use a double-colon notation, it still supports the notation of a single colon.) For backwards compatibility, we recommend that you use a single
The notation of the number. ）

Third, pseudo-elements and pseudo-class specific items:

1. Pseudo-elements:

:: Before/:before Insert some content before an element;

:: After/:after inserts some content after an element;

:: First-letter/:first-letter Use styles for the first or first word of text in an element;

:: First-line/:first-line uses styles for the first line of text for an element;

:: Selection matches user selected by user or in highlighted section;

::p Laceholder matches the placeholder text, the pseudo-element will take effect only if the element has the placeholder attribute set;

:: Backdrop (in pilot phase) is used to change the background color in full screen mode, and the default color for full screen mode is black. The pseudo-element only supports the form of double colons;

2, Pseudo-class:

(1) indicates the state:

: Link selects the links that are not visited;

: visited select the link that has been visited;

: Hover Select the mouse pointer to move in the link;

: Active activated link, that is, click left mouse button but not released;

: Focus selects the input field that gets the focus;

(2) structured pseudo-class:

: Not negation pseudo-class, used to match elements that do not conform to the parameter selector;

: First-child The first child element of a matching element;

: Last-child the last child element of the matching element;

First-of-type matches each element of the first specific type of child element belonging to its parent element;

: Last-of-type the last child element of the matching element;

: Nth-child:nth-child matches one or more elements according to the position of the element, which accepts a an+b form parameter (the maximum number of an+b is the number of matching elements);

: Nth-last-child:nth-last-child is similar to: Nth-child, except that it starts counting from the last child element;

: Nth-of-type:nth-of-type is similar to Nth-child, except that it matches only certain types of elements;

: Nth-last-type:nth-last-of-type is similar to Nth-of-type, except that it starts counting from the last child element;

: Only-child When an element is the only child element in its parent element, the only-child matches the element;

: Only-of-type When an element is the only child of a particular type in its parent element, the only-child matches the element;

: Target when the URL has an anchor name that points to a specific element within the document: target matches that element;

(3) Form related pseudo-class:

: Checked matches the selected INPUT element, this INPUT element includes radio and checkbox;

:d Efault matches the default selected element, for example: The Submit button is always the default button for the form;

:d isabled matches a disabled form element;

: Empty matches elements that have no child elements. If the element contains a text node, HTML element, or a space, then: empty cannot match this element;

: Enabled matches form elements that do not have the disabled attribute set;

: In-range matches elements within a specified area;

: Out-of-range with: In-range instead, it matches elements that are not within the specified area;

: The English meaning of indeterminate indeterminate is "uncertain". When a radio box or check box in a group is not selected, indeterminate matches all the radio boxes or checkboxes in the group;

: Valid match condition validates the correct form element;

: Invalid with: Valid instead, match condition validation error form element;

: Optional match is a form element with a optional attribute. When the form element is not set to required, it is the optional property;

: Required matches the form element with the required attribute set;

: Read-write matches an element that is in the editing state. Input,textarea and the HTML element that sets the contenteditable is in the edit state when it gets the focus;

: scope (in pilot phase) matches elements that are under the style scope. When the style does not set the scope property, the style within the style will work for the entire HTML;

(4) language-related pseudo-class:

:d IR (in experimental phase) matches the specified reading direction element, which can take effect when the Dir attribute is set in the HTML element. There are currently two reading directions supported: Ltr (from left to right) and RTL (right to left). Currently, only Firefox browser support: Dir pseudo-class, and in Firefox browser need to add a prefix (-moz-dir ());

: lang match sets the language-specific element, and the language can be set by setting the Lang= "" Property for the HTML element, setting the charset= "" property of the meta element, or setting the language attribute on the HTTP header;

(5) Other pseudo-classes:

: root matches the root element of the document. The root element of a generic HTML file is an HTML element, while the root element of an SVG or XML file may be other elements;

: Fullscreen matches elements in full-screen mode. Full-screen mode is not opened by pressing F11 in full-screen mode, but through JavaScript's fullscreen API, different browsers have different fullscreen APIs. Currently,: fullscreen need to add prefix to use;

Summary of pseudo-classes and pseudo-elements in CSS