Pseudo class and pseudo element, stupid can’t tell the difference.

Pseudo-classes (pseudo – classes)

Official definition:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

At its core, it is used to select elements outside the document that cannot be selected by normal selectors, such as hover.

Pseudo elements (Pseudo – elements)

Official definition:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, Document languages do not offer mechanisms to access the first letter or the first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document.

At its core, you need to create elements that don’t normally exist in documents, such as ::before.

See their definition should have some understanding of the similarities and differences between them, ha ha 🙃🙃🙃…

The difference between pseudo-classes and pseudo-elements

  • Said method

    In CSS2, pseudo-classes and pseudo-elements are represented by single colons:. After CSS2.1, pseudo-classes are represented by single colons, and pseudo-elements are represented by double colons ::. Browsers also accept single colons for pseudo-elements (:before, :after, :first-line, :first-letter, etc.) that already existed in the CSS2 era. All new pseudo-elements (such as :: Selection) added after CSS2 should be written with double colons. But because of compatibility issues, most use single colons.

  • Define different

    A pseudo class is a fake class, and you can usually add classes to achieve the effect. A pseudo element is a fake element, and you need to add elements to achieve the effect. Consider the following example

    Example 1: Change the first letter of a string to red

    How can we now implement this without pseudo-elements? Select using CSS Slector? I thought about it all night and couldn’t figure it out. Since I couldn’t choose, I couldn’t add a class to change the color of the first letter.

    <p>I am snow</p>
Copy the code

    Try adding an element like this. Create an element span, wrap the initial letter around it, and change its color. There you go. The key point here is that we created a new element that performs the function of ::first-letter, and cannot do so by adding other classes, so we call ::first-letter a pseudo-element rather than a pseudo-class.

      <p><span style={{ color: red }}>I<span/> am snow</p>
Copy the code

    Example 2: Change the sentence “I am snow” to red

    We don’t create a new element, we just add a class. Red-line, so we call :first-child a pseudo-class instead of a pseudo-element. Although it is semantically similar to ::first-letter.

    div:first-child {
 color: red;
}
或
.red-line {
   color: red;
}

<div class='red-line'>
 <p>I am snow</p>
<div>
Copy the code

conclusion

  • Both pseudo-classes and pseudo-elements are used to represent “elements” outside the document tree.
  • A single colon is used for pseudo-classes and pseudo-elements:And double colon: :To represent.
  • The difference between pseudo class and pseudo element is that if there is no pseudo element (or pseudo class), whether the element needs to be added to achieve the purpose, if so, it is a pseudo element, otherwise, it is a pseudo class.

See CSS selectors for more information about common pseudo-classes and pseudo-element selectors.