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

HTML+CSS to implement the sample code of the navigation bar drop-down menu

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Blog

A quick review of CSS3 pseudo-class selectors

HTML+CSS to implement the sample code of the navigation bar drop-down menu

Essential knowledge for web development interviews and written tests (must read)

mysql implements importing only a specified table from the sql file of exported data

Detailed explanation of nginx proxy_cache cache configuration

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

CSS3 mouse hover transition zoom effect

JavaScript to implement random roll call web page

In-depth explanation of the locking mechanism in MySQL

Detailed explanation of the pitfalls of MySQL 8.0

Detailed explanation of various loop speed tests in JS that you don’t know

Recommend

Vue makes a simple random roll call

Introduction to reactive function toRef function ref function in Vue3

Use of nginx custom variables and built-in predefined variables

React antd tabs switching causes repeated refresh of subcomponents

Implementing add, delete, modify and query operations on MySQL based on sqlalchemy

How to make a List in CocosCreator

Detailed explanation of Promises in JavaScript

Overview and differences between html inline elements and html block-level elements

Implement 24+ array methods in JavaScript by hand

Detailed explanation of type protection in TypeScript

Mysql keeps the existing content and adds content later

JS uses map to integrate double arrays

Complete steps for Docker to pull images

Complete steps for mounting a new data disk in CentOS7

Analysis of MySQL's method of exporting to Excel