Detailed explanation of how to use structural pseudo-class selectors and pseudo-element selectors in CSS3

First-child practice

Use first-child attribute to set the text color of the first li tag in ul tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:first-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Result Plot

Last-child Practice

Use last-child property to set the text color of the last li tag in ul tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:last-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Result Plot

nth-child practice

Use nth-child(n) attribute to set the text color of the third li tag in ul tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:nth-child(3){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Result Plot

Use nth-child(even) attribute to set the text color of the even-numbered li tags in ul tag to red

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:nth-child(even){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Result Plot

Use nth-child(2n+1) attribute to set the text color of the odd-numbered li tags in ul tag to red

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:nth-child(2n+1){
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</body>

</html>

Result Plot

Only-child Practice

Use only-child attribute to set the text color of only one li tag in the ul tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Structural pseudo-class selector</title>
  <style>  
    ul li:only-child{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <ul>
     <li>Just one li tag</li>
   </ul>
</body>

</html>

Result Plot

Introduction to pseudo-element selectors

The main function of pseudo-elements is to manipulate the text of elements and add content.
Pseudo-element usage table

Introduction to structural pseudo-class selectors

Structural pseudo-class selectors are used to handle some special effects.
Structural pseudo-class selector property description table

property	describe
E:first-child	Matches the first child of the E element.
E:last-child	Matches the last child of the E element.
E:nth-child(n)	Matches the nth child of an element called E.
E:nth-child(2n) or E:nth-child(even)	Matches even-numbered children of the E element.
E:nth-child(2n+1) or E:nth-child(odd)	Matches odd-numbered children of the E element.
E:only-child	Matches exactly one child of an E element.

property	describe
E:first-letter	Sets the first word in the E element.
E:first-line	Sets the first line of text in the E element.
E::before	Add content before the E element.
E::after	Add content at the end of the E element.

First-letter practice

Use first-letter attribute to set the color of the first letter of the text in the li tag in ul tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pseudo-element selector</title>
  <style>  
    ul li:first-letter{
      color: red;
    }
  </style>
</head>

<body>
   <ul>
     <li>Smile is the first belief</li>
   </ul>
</body>

</html>

Result Plot

First-line practice

Use first-line attribute to set the color of the first line of text in the div tag to red.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pseudo-element selector</title>
  <style>  
    div:first-line{
      color: red;
    }
  </style>
</head>

<body>
   <div>
     Smile is the first belief, smile is the first belief, smile is the first belief, smile is the first belief, smile is the first belief,
     Smile is the first belief, smile is the first belief, smile is the first belief, smile is the first belief, smile is the first belief.
   </div>
</body>
</html>

Result Plot

beforePractice

Use the before attribute to add the two words "Come on" before the text of div tag.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pseudo-element selector</title>
  <style>  
    div::before{
      content:"Come on";
    }
  </style>
</head>

<body>
   <div>Smile is the first belief. </div>
</body>

</html>

Result Plot

Note: The added text must be written inside content:"加油"; .

after practice

Use after attribute to add the two words "Come on" at the end of the text of div tag.

Code Blocks

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pseudo-element selector</title>
  <style>  
    div::after{
      content:"Come on";
    }
  </style>
</head>

<body>
   <div>Smile is the first belief,</div>
</body>

</html>

Result Plot

Note: The added text must be written inside content:"加油"; .

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Tips for List Building for Website Maintenance Pages

>>: Analysis of the difference between bold <b> and <strong>