Pseudo class and pseudo element, for the vast majority of students, are familiar with the name, but indeed many people do not know the difference between them, so that the concept of confusion. And when the concept is confused, it usually means you don’t use it very often, afraid of making mistakes, afraid of using it badly. This can greatly affect your productivity, as you’ll have to write a lot of…… that could have been done with a few lines of code So taking the time to figure out every seemingly small concept makes programming more efficient. Let’s get down to business.


The difference between a pseudo class and a pseudo element is quite simple and can be understood literally. They all share the modifier “fake”, so what does fake mean? It’s a fake. So, pseudo-classes are pseudo-classes, pseudo-elements are pseudo-elements, and that’s the literal difference between them. Now let’s feel it by definition.

1. The pseudo class

The definition given by CSS3 is:

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.

Pseudo-classes exist to format information that is not in the DOM tree and is not available to regular CSS selectors through selectors.

Through the above concept, we know that there are two functions of pseudo class:

1. Format information outside the DOM tree. For example: tag: Link, :visited, etc. This information does not exist in the DOM tree.

2. Information that cannot be retrieved by regular CSS selectors. For example, to get the first child element, we can’t get it with a regular CSS selector, but we can get it with :first-child.

2. The pseudo elements

The definition given by CSS3 is as follows:

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 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 (e.g., the ::before and ::after pseudo-elements give access to generated content).

Pseudo-elements can create virtual elements that document languages cannot. For example, the document language does not have a mechanism for describing the first letter or line of an element’s content, but pseudo-elements do (::first-letter, ::first-line). Pseudo-elements can also create content that does not exist in the source document, such as using ::before or ::after.

3. Difference between pseudo-classes and pseudo-elements (difference under CSS3)

From the above concept, we can know the most essential difference between pseudo-classes and pseudo-elements:

In fact, pseudo-classes make up for the lack of CSS selectors, used for more convenient access to information;

HTML:

<ul>    
    <li>11111</li> 
    <li>22222</li>
</ul>   Copy the code

CSS:

li:first-child { color: red; } // The selector can't pick the first child directlyCopy the code

A pseudo-element essentially creates a virtual container (element) into which we can add content or styles.

HTML:

<p>  
    <span class="first-letter">H</span>ello, World
</p>Copy the code

CSS:

.first-letter {
    color: red;
}Copy the code

The code above is essentially:

p::first-letter {
    color: red;
}Copy the code

So, you can understand that the pseudo-element essentially creates a virtual container (element).

In addition to this essential distinction, in CSS3 pseudo-classes are denoted by a single colon:; Pseudo-elements are represented by double colons ::. A selector can use multiple pseudo-classes at the same time (but some pseudo-classes are mutually exclusive); A selector can only use one pseudo-element at a time (future versions may support multiple pseudo-elements).

4. Main usage

4.1 pseudo-classes

1 :first-child

Matches the first child element.

HTML:

<ul>
    <li>111</li>
    <li>222</li>
</ul>   Copy the code

CSS:

li:first-child { color: red; // The first li will turn red}Copy the code

2 :last-child

Matches the last child element.

HTML:

<ul>
    <li>aaa</li>    
    <li>bbb</li>    
    <li>ccc</li>
</ul>Copy the code

CSS:

li:last-child { color:red; // The last li will turn red}Copy the code

3 :first-of-type

Matches the first child element of a specific type that belongs to its parent.

HTML:

<div> <h1> H1 text </h1> <p> P text </p> </div>Copy the code

CSS:

p:first-of-type { color: red; // <p> The contents of the tag become red}Copy the code

It is important to emphasize the difference between “first-child” and “first-of-type”. If your CSS is written as:

p:first-child {
    color:red;
}Copy the code

The page will not change because the

element is not the first child of the parent

element.

4 :last-of-type

Matches the last child element of a specific type that belongs to its parent.

HTML:

< div > < h1 > h1 text < / h1 > < h1 > h1 text 2 < / h1 > < p > p text < / p > < / div >Copy the code

CSS:

h1:last-of-type { color: red; // The contents of the first <h1> tag become red (h1 text 2)}Copy the code

4.2 pseudo elements

1 ::before

Inserts content before the selected element. You need to specify the Content property to insert content.

HTML:

<p>CSS</p>Copy the code

CSS:

p::before {
    content: "Hi,";
}Copy the code

2 ::after

Inserts content after the selected element. You need to specify the Content property to insert content.

HTML:

<p>Hi, </p>Copy the code

CSS:

p::after {  
    content: "CSS";
}Copy the code

3 ::first-letter

Matches the first letter of the text of the element.

HTML:

<p> I'm learning pseudo-elements </p>Copy the code

Note: Try it<p>Stamp:<p>??? I'm learning pseudo elements </p>You’ll find something interesting.

CSS:

p::first-letter { font-size: 32px; }Copy the code

4 ::first-line

Matches the text of the first line in the element (used only in block elements).

HTML:

<p> I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element </p>Copy the code

CSS:

p::first-line {  
    color: red;
}Copy the code

5 ::selection

Matches the part selected by the user.

HTML:

<p> I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element, I'm learning pseudo-element </p>Copy the code

CSS:

p::selection {  
    color: red;
}Copy the code

Finally finally, WHAT I say is not necessarily right, you must try yourself!

(End of article)