【CSS learning summary 】 chapter 4 – CSS selector – pseudo-classes and pseudo-elements

“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

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

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;