A quick review of CSS3 pseudo-class selectors

Preface If CSS is the basic skill of front-end development, then "selectors" are the foundation of the foundation. If you are copying or learning these confusing selectors, then you have come to the right place, my old friend. This article will directly compare their features to help you quickly master them: first-child last-child first-of-type last-of-type only-child only-of-type nth-child nth-last-child nth-of-type nth-last-of-type first-child & last-child These two selectors will match the first element in a set of siblings: Note: There are actually three conditions that need to be met for this selector to work: Matched by the previous selector, in this case `p` Is a group of sibling elements Is the first (or last) element I won't go into details about `last-child` here, the difference is that it matches from back to front. first-of-type & last-of-type These two selectors will match the first (last) element of the same type regardless of whether the element is actually the first (last) element in the group: Note: There are actually two conditions that need to be met for this selector to work: Matched by the previous selector, in this case `p` Is a group of sibling elements I won't go into detail about `last-of-type` here, the difference is that it matches from back to front. only-child & only-of-type `only-child` matches elements that have no sibling elements, in other words, "orphan" elements: The "isolated" elements in the above figure are the first `<p>` and the nested `<span>` , both of which are matched by the selector. `only-of-type` matches elements of a type that is unique among a set of sibling elements: Because the first `<p>` , the second `<p>` and the last `<span>` are all unique in their parent element type, they will be matched by the selector. nth-child & nth-last-child The most interesting thing about these pseudo-class selectors is that they can pass in a formula `an+b` to match elements according to this formula. There are many ways to play with this formula, which has led many people to memorize all the combinations of this formula and the matching content. In fact, our way of thinking is solidified by CSS, because it is very easy to figure out the rules from a mathematical point of view. For example, there is the following code: <style> p:nth-child(2n+1){ color:blue; } </style> <body> <p>First line</p> <p>Line 2</p> <p>Line 3</p> </body> Thinking Mode: First collect the matched elements, in this example, three `<p>` tags Count from subscript 0 to 2 to represent the number of `<p>` , and substitute them into the formula to evaluate. Match the elements with the corresponding subscripts (the element subscripts start counting from 1) result:

Preface

If CSS is the basic skill of front-end development, then "selectors" are the foundation of the foundation. If you are copying or learning these confusing selectors, then you have come to the right place, my old friend.

This article will directly compare their features to help you quickly master them:

first-child
last-child
first-of-type
last-of-type
only-child
only-of-type
nth-child
nth-last-child
nth-of-type
nth-last-of-type

first-child & last-child

These two selectors will match the first element in a set of siblings:

Note: There are actually three conditions that need to be met for this selector to work:

Matched by the previous selector, in this case p
Is a group of sibling elements
Is the first (or last) element

I won't go into details about last-child here, the difference is that it matches from back to front.

first-of-type & last-of-type

These two selectors will match the first (last) element of the same type regardless of whether the element is actually the first (last) element in the group:

Note: There are actually two conditions that need to be met for this selector to work:

Matched by the previous selector, in this case p
Is a group of sibling elements

I won't go into detail about last-of-type here, the difference is that it matches from back to front.

only-child & only-of-type

only-child matches elements that have no sibling elements, in other words, "orphan" elements:

The "isolated" elements in the above figure are the first  and the nested  , both of which are matched by the selector.

only-of-type matches elements of a type that is unique among a set of sibling elements:

Because the first  , the second  and the last  are all unique in their parent element type, they will be matched by the selector.

nth-child & nth-last-child

The most interesting thing about these pseudo-class selectors is that they can pass in a formula an+b to match elements according to this formula. There are many ways to play with this formula, which has led many people to memorize all the combinations of this formula and the matching content.

In fact, our way of thinking is solidified by CSS, because it is very easy to figure out the rules from a mathematical point of view. For example, there is the following code:

<style>
  p:nth-child(2n+1){
    color:blue;
  }
</style>
<body>
  <p>First line</p>
  <p>Line 2</p>
  <p>Line 3</p>
</body>

Thinking Mode:

First collect the matched elements, in this example, three  tags
Count from subscript 0 to 2 to represent the number of  , and substitute them into the formula to evaluate.
Match the elements with the corresponding subscripts (the element subscripts start counting from 1)

result:

formula	explain
2n	All even elements
2n+1	All odd elements
n & n+1	All Elements
n+2	Elements after the second element (including the second element)
n+3	Elements after the third element (including the third element)
0n	Nothing matches
3n+4	4,7,10,13 ....
1	Only matches the first element
-n+2	Only matches the first two elements
nth-child(odd)	Odd elements
nth-child(even)	Even elements

But don't forget nth-child still matches the same set of sibling elements, but what's interesting is nth-child will use the selector to filter, but when applying the style, it does not apply the style to the matched elements:

In the above figure, the two groups of  elements in <div> are matched as sibling elements, but interestingly, the third  element "the third row" is also matched, which means that the style will be applied directly to the group of sibling elements instead of the matched  element. However, it should be noted that if  in the "third group" in the picture is <div> , the different type styles will not be applied.

nth-last-child is the back-to-front version, which I will not give a detailed example here:

MDN also gives an interesting example, which can control the style of elements according to the number of elements:

li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

nth-of-type & nth-last-of-type

nth-of-type matches:

Sibling elements of the same type in the same group
Matches the element corresponding to the calculated value of the formula

Did you notice that nth-of-type is different from nth-child ? After calculation, the style is applied to the matched element, not to sibling elements.

nth-last-of-type -front version, which will not be described in detail here:

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.

<<: ie filter collection

>>: Detailed explanation of deploying Elasticsearch kibana and ik word segmenter in docker

Which loop is the fastest in JavaScript?

A quick review of CSS3 pseudo-class selectors

Which loop is the fastest in JavaScript?

The most detailed installation and configuration of redis in docker (with pictures and text)

Sample code for a large drop-down menu implemented in pure CSS

Implementation of Docker private warehouse registry deployment

How to install Nginx in CentOS7 and configure automatic startup

Database issues and pitfalls in connecting to cloud servers with Navicat Premium15

Vue implements custom "modal pop-up window" component example code

Complete MySQL Learning Notes

The whole process of installing gogs with pagoda panel and docker

VMware virtual machine installation CentOS 8 (1905) system tutorial diagram

Recommend

Specific use of MySQL operators (and, or, in, not)

Master-slave synchronization configuration and read-write separation of MySQL database

Detailed explanation of adding dotted lines to Vue element tree controls

How to install and deploy zabbix 5.0 for nginx

Border-radius IE8 compatible processing method

Solution to prevent caching in pages

The specific implementation of div not automatically wrapping and forcing not wrapping in html

Deleting the database and running away? How to use xtraback to back up the MySQL database

WeChat applet example of using functions directly in {{ }}

How to enter and exit the Docker container

The difference between two MySQL delete user statements (delete user and drop user)

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

Problems with Vue imitating Bibibili's homepage

Tutorial on installing AutoFs mount service under Linux

Introduction to 10 online development tools for web design