“This is the 23rd day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

One, foreword

Last article, mainly introduced the CSS selector, mainly involves the following points:

  • Three main features of CSS;
  • CSS selector priority;
  • Rules for calculating the CSS priority;
  • CSS selector weights;
  • CSS selector interview questions;

This article introduces CSS selectors: pseudo-classes and pseudo-elements.

Pseudo class (pseudo class selector)

1. Introduction to pseudo classes

  • Pseudo classes are used to define a particular state of an element;
  • The same element, according to different states, display different styles, style changes with the state (user behavior) change;
  • Pseudo-classes are indicated by colons, such as::link,:hover;
  • In contrast to normal CSS classes, pseudo-class selectors can style elements only if they are in a state that the DOM tree cannot describe. So it’s called pseudo-class;

2. Pseudo-class syntax

<! -- syntax --> selector:pseudo-class {property: value; } <! - sample - >a:link {
  color: #FF0000;
}

input:focus {
  background-color: yellow;
}
Copy the code

Remark:

  • Pseudo class names are case-insensitive;

3. The application of pseudo classes

  • Sets the style to hover over an element.
  • Set different styles for visited and unvisited links;
  • Sets the style of the element when it gets focus.
// Example: the four states of a tag correspond to four pseudo-classes;

/* Unvisited links */
a:link {
  color: blue;
}

/* Already visited links */
a:visited {
  color: red;
}

/* Hover over the link */
a:hover {
  color: orange;
}

/* Selected links (when mouse clicked but not released) */
a:active {
  color: #0000FF;
}
Copy the code

Note:

  • The four pseudo-classes (four states) of a label must be written in a certain order, otherwise they will be invalid:
  • a:hoverMust be in the CSS definitiona:link 和 a:visitedAfter that, it takes effect;
  • a:activeMust be in the CSS definitiona:hoverBefore it takes effect;
  • The order of writing is:a:link,a:visited,a:hover,a:active;
  • Method of memorization: Love hate – “principle of love and hate”;

4. The meaning of pseudo-classes

  • Pseudo-class selectors allow you to format information outside the DOM tree.
  • Pseudo-class selectors can obtain information that conventional CSS selectors cannot obtain.

5. All pseudo-class selectors

The selector The sample note
:active a:active Select the active link
:checked input:checked Select each one that is selected<input>The element
:disabled input:disabled Select each that is disabled<input>The element
:enabled input:enabled Select each enabled<input>The element
:empty p:empty Select each that has no child elements<p>The element
:first-child p:first-child Select each of the first child elements of its parent<p>yuan
:first-of-type p:first-of-type Selects the first child of the specified type in its parent<p>
:last-child p:last-child Selects each of the last child elements of its parent<p>The element
:last-of-type p:last-of-type Choose the last one as father<p>Each of the elements<p>The element
:focus input:focus Choose the one that gets the focus<input>The element
:hover a:hover Select the link in the hover state
:in-range input:in-range Select values that meet the specified range<input>The element
:invalid input:invalid Select all invalid values<input>The element
:lang p:lang(it) Select eachThe lang attribute's valueIt starts with “it”<p>The element
:link a:link Select all unvisited links
:not(*selector*) :not(p) Select each non<p>Element of element
:nth-child(*n*) p:nth-child(2) Selects each element that is the second child of its parent<p>The element
:nth-last-child(*n*) p:nth-last-child(2) Selects each of the second child elements that are the parent<p>The element

Counts from the last child element
:nth-last-of-type(*n*) p:nth-last-of-type(2) Choose the second as the father<p>Each of the elements<p>The element

Counts from the last child element
:nth-of-type(*n*) p:nth-of-type(2) Choose to be his father’s second<p>Each of the elements<p>The element
:only-of-type p:only-of-type Choose to be his father’s sole<p>Each of the elements<p>The element
:only-child p:only-child That is selected as the only child of its parent<p>The element
:optional input:optional Select one without the “required” attribute<input>The element
:out-of-range input:out-of-range Selects values outside the specified range<input>The element
:read-only input:read-only Select specifiedreadonlyProperties of the<input>The element
:read-write input:read-write Choose not to bringreadonlyProperties of the<input>The element
:required input:required Select specifiedrequiredProperties of the<input>The element
:root root Select the root element of the element
:target #news:target Select the currently active#newsElement (click on the URL that contains the anchor name)
:valid input:valid Select all that have valid values<input>The element
:visited a:visited Select all visited links

Pseudo-element (pseudo-element selector)

1. Introduction to pseudo-elements

  • CSS pseudo-elements are used to set the style of the specified part of the element.
  • Pseudo-elements use double colon notation, as in:::first-line;

Note: In order to distinguish pseudo-classes from pseudo-elements, CSS3 uses double colon notation instead of single colon notation for pseudo-elements; However, for backward compatibility, CSS2 and CSS1 pseudo-elements can still use a single colon syntax;

2. Syntax for pseudo-elements

<! -- Syntax --> selector::pseudo-element {property: value; } <! - sample - >p::first-line {
  color: #ff0000;
}

h1::before {
  content: 'has';
}
Copy the code

3. Application of pseudo-elements

Note:

  • ::first-linePseudo-elements can only be applied to block-level elements
  • ::first-letterPseudo-elements only apply to block-level elements

Todo: What attributes are valid under pseudo elements need to be added later;

4. The meaning of pseudo-elements

Use to create and style elements that are not in the document tree.

  • Can be achieved by:beforeAppend text to the element and style the text;
  • The user can see the text content, but the text is not actually in the document tree;

Pseudo-elements can create virtual elements that document languages cannot;

  • The document language cannot describe the first letter or line of an element’s content, but pseudo-elements can (::first-letter,::first-line);
  • Pseudo-elements can also create content that does not exist in the source document; For example: use::before 或 ::after;

5. All pseudo-element selectors

The selector The sample note
::first-letter p::first-letter choose<p>The first letter of the element;
::first-line p::first-line choose<p>Element first line;
::before p::before in<p>Insert content before the element;

Must be definedcontentProperties;
::after p::after in<p>Insert content after the element;

Must be definedcontentProperties;
::selection p::selection Set the style selected by the user;

Can only be defined when selectedcolor

andbackground-color;

Fourth, the difference between pseudo-class and pseudo-element selectors

  • The pseudo-class operates on an existing element in the document tree, while the pseudo-element creates an element outside the document number. Thus, the difference between a pseudo-class and a pseudo-element is whether an element outside the document tree is created;
  • Pseudo-classes are essentially designed to make up for regular CSS selectors in order to get more information;
  • A pseudo-element essentially creates a virtual container with content;
  • The syntax of pseudo-classes and pseudo-elements in CSS3 is different.
  • In CSS3, it is specified that pseudo-classes are represented by a colon and pseudo-elements by two colons;
  • Multiple pseudo-classes can be used simultaneously, but only one pseudo-element can be used simultaneously;

Five, the end

This article introduces CSS selector pseudo-classes and pseudo-elements, mainly involving the following points:

  • Pseudo class selector;
  • Pseudo-element selector;
  • The difference between pseudo-class and pseudo-element selectors;

Next, the CSS variable var;

Maintenance record

  • 20211126
    • Adjusted the “pseudo class (pseudo class selector) part, expanded the content;
    • Tweaked the “pseudo-element (pseudo-element selector)” section to expand the content;
    • Adjusted the structure of the table of contents, the ending part and the abstract of the article;