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

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>

Recommend

Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

1. Transactions have ACID characteristics Atomici...

Explanation of Truncate Table usage

TRUNCATE TABLE Deletes all rows in a table withou...

mysql create database, add users, user authorization practical method

1. Create a MySQL database 1. Create database syn...

6 tips for web design

...

HTML simple web form creation example introduction

<input> is used to collect user information ...

js to realize web message board function

This article example shares the specific code of ...

How to automatically delete records before a specified time in Mysql

About Event: MySQL 5.1 began to introduce the con...

How to recover data after accidentally deleting ibdata files in mysql5.7.33

Table of contents 1. Scenario description: 2. Cas...

CentOS 6 uses Docker to deploy redis master-slave database operation example

This article describes how to use docker to deplo...

Detailed example of sorting function field() in MySQL

Preface In our daily development process, sorting...

How to implement a simple HTML video player

This article introduces the method of implementin...

Steps for Vue3 to use mitt for component communication

Table of contents 1. Installation 2. Import into ...

MySQL group by method for single word grouping sequence and multi-field grouping

I have created a goods table here. Let's take...

JavaScript super detailed implementation of web page carousel

Table of contents Creating HTML Pages Implement t...

A brief discussion on read-only and disabled attributes in forms

Read-only and disabled attributes in forms 1. Rea...