Examples of new selectors in CSS3

Structural (position) pseudo-class selector (CSS3)

• :first-child : The specified selector selects the first child element of its parent element
• :last-child : The specified selector selects the last child element of its parent element
• :nth-child(n) : matches the Nth child element of its parent, regardless of the element’s type
• :nth-last-child(n) : The selector matches every element that is the Nth child of its element, regardless of element type, counting from the last child. n can be a number, keyword or formula

li:first-child { /* Select the first child */
                color: pink; 
            }
li:last-child { /* last child */
                color: purple;
            }
li:nth-child(4) { /* Select the 4th child n represents the number */ 
                color: skyblue;
            }

Attribute Selectors

Selectors that select tags with certain special attributes are called attribute selectors.

/* Get the element with this attribute */
div[class^=font] { /* class^=font means the starting position of font*/
            color: pink;
        }
div[class$=footer] { /* class$=footer indicates the end position of footer*/
            color: skyblue;
        }
div[class*=tao] { /* class*=tao *= means tao can be in any position*/
            color: green;
        }
<div class="font12">Attribute selector</div>
    <div class="font12">Attribute selector</div>
    <div class="font24">Attribute selector</div>
    <div class="font24">Attribute selector</div>
    <div class="font24">Attribute selector</div>
    <div class="24font">Attribute selector 123</div>
    <div class="sub-footer">Attribute selector footer</div>
    <div class="jd-footer">Attribute selector footer</div>
    <div class="news-tao-nav">Attribute selector</div>
    <div class="news-tao-header">Attribute selector</div>
    <div class="tao-header">Attribute selector</div>
input[type=text]
div[class*=tao]

Pseudo-element selectors (CSS3)

• E::first-letter The first word or character of the text (such as Chinese, Japanese, Korean, etc.)
• E::first-line first line of text;
• E::selection can change the style of the selected text;

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/*Special style for the first line*/
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

4. E::before and E::after

Create an element at the start and end positions inside the E element. This element is an inline element and must be used in conjunction with the content attribute.

div::befor {
  content:"start";
}
div::after {
  content:"end";
}

E:after and E:before are pseudo-elements in older versions. In the CSS3 specification, “:” is used to represent pseudo-classes and “::” is used to represent pseudo-elements. However, in higher-version browsers, E:after and E:before will be automatically recognized as E::after and E::before. This is done for compatibility.

The difference between ":" and "::" is that they distinguish between pseudo-classes and pseudo-elements

They are called pseudo-elements because they are not real page elements. HTML has no corresponding elements, but all their usage and performance behaviors are the same as real page elements. You can use the same CSS styles as page elements on them. On the surface, they look like certain elements of the page, but in fact they are behaviors displayed by CSS styles. Therefore, they are called pseudo-elements. It is the display of pseudo-elements in the HTML code structure. It can be seen that the structure of pseudo-elements cannot be reviewed.

Notice

The content added by the pseudo-elements :before and :after is an inline element by default**; the content attribute of these two pseudo-elements represents the content of the pseudo-elements. When setting :before and :after, you must set their content attribute, otherwise the pseudo-elements will not work.

Summarize

The above is an example of the new selector in CSS3 that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!