This is the 22nd day of my participation in Gwen Challenge

The purpose of this article: to solve the problem of pseudo-class and pseudo-element silly not clear!

For clarity, I’ve broken this down into three parts:

  1. Distinguish between pseudo-classes and pseudo-elements
  2. Classify pseudo classes and pseudo elements
  3. application

Distinguish between

Pseudo-elements exist before CSS3, but there is no statement of pseudo-elements, which are all summarized as pseudo-classes, so many people can not distinguish pseudo-classes from pseudo-elements. Like the usual :before and :after. Are they pseudo-classes or pseudo-elements? In fact, before CSS3, they were called pseudo-classes. Until CSS3, they were officially distinguished as pseudo-elements

So how to distinguish pseudo-elements from pseudo-classes, remember two things:

1. Pseudo-classes represent some state of the selected element, for example:hover

2. A pseudo-element represents a part of the selected element that looks like a separate element, but is a “fake element” that only exists in CSS, so it is called a “fake” element, for example:beforeand:after

The core difference is whether or not a “new element” is created.

classified

As there are many pseudo-classes and pseudo-elements, I summarize them in the following two figures for easy memory:

Pseudo elements

pseudo-classes

application

Pseudo-elements before CSS3

Include before, after, first-letter, and first-line, respectively, before, after, and the first and first lines of the element content

Such as

The following code

div.box1{
    border: 1px rgb(5.248.114) solid;
    background: rgb(221.132.214);
    background-clip: content-box;
    width: 400px;
    padding: 10px;
}
/* Pseudo-elements before and after */
div.box1:before{
    content: "I am the before";
    color: rgb(177.81.13);
}
div.box1:after{
    content: "I'm the after.";
    color: rgb(243.29.72);
}
/* Pseudo-elements :first-letter and :first-line*/
div.box2:first-letter{
    font-size: 3em;
    font-weight: bold;
}
div.box2:first-line{
    color: rgb(101.245.6);
}
Copy the code

Pseudo element added after CSS3

This includes selection and placeholder, representing the selected portion and placeholder text, respectively

Such as

The following code

div.section::selection{
    color: rgb(247.8.135);
}
input.placeholder::placeholder{
    background-color: rgb(80.156.231);
    color: rgb(19.235.235);
}
Copy the code

State class pseudo class

There are link, visited, hover, active and focus respectively, which represent the link, click, hover, activated and focus in normal state respectively

The following

The following code

a{
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;	
}
a.link:link{	
    background-color: rgb(71.130.240);	
}
a.visited:visited{
    color: rgb(128.126.126);
    background-color: rgb(203.218.151);
}
a.hover:hover{
    background-color: rgb(221.51.142);
}
a.active:active{
    font-size: 2em;
}
a.focus:focus{
    background-color: rgb(247.142.4);
}
Copy the code

Structure class pseudo class

The structure class has more pseudo-analogiesSo let’s use it

The following code

p:not(.p1) {
    font-size:.8em;
}
p:first-child {
    font-weight: bold;
}
p:last-child{
    color: rgb(86.168.5);
}
p:only-child{
    color: lightcoral;
    background-color: rgb(193.247.193);
}
p:nth-child(2n){
    background-color: lightseagreen;
}
p:nth-last-child(3) {color: #f44;
}
Copy the code

The Type series is more commonly used because it highlights elements of the same type. Since the usage is basically the same, I won’t try it here

Let’s look at the form-related pseudo classes

Form-related pseudo classes

There are also more than 10 form-related pseudo classes, as follows

Let’s try a few

The following code

input:checked{
    width: 25px;
    height: 25px;
}
input:disabled{
    background: rgb(168.163.163);
    color: rgb(128.120.120);
}
input:enabled{
    background: rgb(150.205.223);
}
.empty:empty{
    height: 1em;
    margin: 10px 0;
    background-color: rgb(231.26.231);
}
Copy the code

Other pseudo-classes

These include root, fullscreen, dir, and lang, which are not used much, but try them out, such as setting the background to black via root pseudo-class representation

code

:root{
    background-color: rgb(12.12.12);
}
Copy the code

The above is the summary of pseudo class and pseudo element, if you have any questions, please leave a message to inform, thank you

END

Attachment: source code for the above example

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <title>The source code</title>
    <style type="text/css">
            :root {
                    background-color: rgb(12.12.12);
            }

            div.box1 {
                    border: 1px rgb(5.248.114) solid;
                    background: rgb(221.132.214);
                    background-clip: content-box;
                    width: 400px;
                    padding: 10px;
            }
            /* Pseudo-elements before and after */
            div.box1:before {
                    content: "I am the before";
                    color: rgb(177.81.13);
            }
            div.box1:after {
                    content: "I'm the after.";
                    color: rgb(243.29.72);
            }
            /* Pseudo-elements :first-letter and :first-line*/
            div.box2:first-letter {
                    font-size: 3em;
                    font-weight: bold;
            }
            div.box2:first-line {
                    color: rgb(101.245.6);
            }
            Placeholder */ / placeholder */
            div.section::selection {
                    color: rgb(247.8.135);
            }
            input.placeholder::placeholder {
                    background-color: rgb(80.156.231);
                    color: rgb(19.235.235);
            }
            /* State pseudo class */
            a {
                    text-decoration: none;
                    padding: 10px;
                    border-radius: 5px;
            }
            a.link:link {
                    background-color: rgb(71.130.240);
            }
            a.visited:visited {
                    color: rgb(128.126.126);
                    background-color: rgb(203.218.151);
            }
            a.hover:hover {
                    background-color: rgb(221.51.142);
            }
            a.active:active {
                    font-size: 2em;
            }
            a.focus:focus {
                    background-color: rgb(247.142.4);
            }
            /* Structural pseudo-class */
            p:not(.p1) {
                    font-size:.8em;
            }
            p:first-child {
                    font-weight: bold;
            }
            p:last-child {
                    color: rgb(86.168.5);
            }
            p:only-child {
                    color: lightcoral;
                    background-color: rgb(193.247.193);
            }
            p:nth-child(2n) {
                    background-color: lightseagreen;
            }
            p:nth-last-child(3) {
                    color: #f44;
            }
            /* Form related */
            input:checked {
                    width: 25px;
                    height: 25px;
            }
            input:disabled {
                    background: rgb(168.163.163);
                    color: rgb(128.120.120);
            }
            input:enabled {
                    background: rgb(150.205.223);
            }
            .empty:empty {
                    height: 1em;
                    margin: 10px 0;
                    background-color: rgb(231.26.231);
            }
    </style>
</head>
<body>
    <! -- False element -->
    <div class="box1">Element content</div>
    <div class="box2">Another div</div>
    <br>
    <div class="section">There's a lot of content here and there's a lot of content here and there's a lot of content here</div>
    <input type="text" placeholder="This is a placeholder." class="placeholder"><br><br>
    <! -- State pseudo class -->
    <a href="#" class="link">The normal links</a>
    <a href="#" class="visited">After the click</a>
    <a href="#" class="hover">When hover</a>
    <a href="#" class="active">Activated state</a>
    <a href="#" class="focus">When you get focus</a>
    <! -- Structure class pseudoclass -->
    <div class="p">
            <p class="p1">This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
            <p>This is a paragraph</p>
    </div>
    <div>
            <p>An only child</p>
    </div>
    <br><br>
    <! -- Element disabled and enabled state -->
    <input type="checkbox" checked />
    <input type="checkbox" />
    <input type="text" value="Disabled" disabled />
    <input type="text" value="Enabled" />
    <div class="empty"></div>
    <br><br><br><br>
</body>

</html>

Copy the code