Summarize the commonly used nth-child selectors
PrefaceIn front-end programming, we often use the nth-child selector, which can accept a numerical value as well as odd, even, etc. Today, when I was reading the book Mastering CSS, I remembered that it can also accept an expression, such as 4n+1, -2n+1, etc. So what are their specific uses? What are the applicable scenarios? Maybe you are still not very clear, let's take a closer look at the examples below. Their HTML structure is as follows:
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
</body>
nth-child(even) and nth-child(odd)This is a very commonly used variable, representing even and odd numbers respectively.
<style type="text/css">
a:nth-child(even){/*Even fonts are red*/
color: red;
}
a:nth-child(odd){/*Odd font size is 30px*/
font-size: 30px;
}
</style>Checking the browser also found that it is indeed the same as we expected, as follows:
nth-child(1)Select a single element, the element is matched according to the given value, counting from 1, which should be the most common, as follows:
<style type="text/css">
a:nth-child(3){/*Select the data of the third element for processing*/
color: red;
font-size: 30px;
}
</style>The result is as we expected:
nth-child(2n+1)This form of expression is rarely used. How should it be handled? In fact, it is also very simple. Just count n from 0, calculate the value of the entire expression, match the document, and stop if there is no successful match. For example, how does nth-child(2n+1) match the current document? When n=0, 2n+1=1, it continues to match if it exists. n=1, 2n+1=3, it also exists. n=2, 2n+1=5, it still exists. n=3, 2n+1=7, it can no longer be matched successfully, so the elements that work should be rows 1, 3, and 5. Let's see if the browser results are as we expected:
Sure enough, there are only 1, 3, 5 What if it is -n, for example -n+2, it is actually similar. When n=0, -n+2=2, there is a continued match. When n=1, -n+2=1 still exists. When n=0, -n+2=0 does not exist, the match ends. Therefore, the elements that work should be rows 1 and 2. Look at the results:
So we can use this to match the first few elements. Of course, the elements that can be matched will be different depending on the expression you design. Extensions that are often confused with the above: nth-of-type:nth-of-type has similar values to the above ones, so what is the difference? When the page elements become complicated, you can see it. Change the HTML structure as follows:
<body>
<a>a1</a>
<p>p1</p>
<a>a2</a>
<p>p2</p>
<a>a3</a>
<p>p3</p>
<a>a4</a>
<p>p4</p>
</body>
You can see that there is an extra p tag here, so what happens when we add the following CSS style?
<style type="text/css">
a:nth-child(2){
color: red;
font-size: 30px;
}
</style>
I think many people might say that a2 turns red and becomes bigger, but is it really? Look at the results:
The result is no change, why? Because a:nth-child(2) refers to both the a tag and the second child element in the parent element. In our structure, the second child element in the parent element should be the tag corresponding to p1. So how can we make a2 red and bigger? Here we have to introduce the confusing a:nth-of-type(2), because it refers to both the a tag and the second child element of the parent element among all a elements. Isn’t that exactly what I want? Let's see if the result is what we want?
<style type="text/css">
a:nth-of-type(2){
color: red;
font-size: 30px;
}
</style>
This is what we think. summaryFirst, we summarize the various values of nth-child. Note that single values start counting from 1. If it is a numeric expression, n starts counting from 0. Introduced the confusing nth-of-type, nth-of-type refers to the order in the current specified type of elements, while nth-child is the order among all elements This concludes this article on summarizing the commonly used nth-child selectors. For more information about the nth-child selector, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: The perfect solution for highlighting keywords in HTML
>>: Install and configure ssh in CentOS7
Recommend
The grid is your layout plan for the page
<br /> English original: http://desktoppub.a...
How to construct a table index in MySQL
Table of contents Supports multiple types of filt...
How to use TypeScript in Vue
introduction In recent years, the call for TypeSc...
Sample code for implementing horizontal infinite scrolling with pure CSS3
The examples in this article are all written in s...
Analysis of MySQL general query log and slow query log
The logs in MySQL include: error log, binary log,...
How to create your first React page
Table of contents What is Rract? background React...
How to automatically delete records before a specified time in Mysql
About Event: MySQL 5.1 began to introduce the con...
Detailed explanation of how to reduce memory usage in MySql
Preface By default, MySQL will initialize a large...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
Detailed installation process of nodejs management tool nvm
nvm nvm is responsible for managing multiple vers...
A brief discussion on the problem of Docker run container being in created state
In a recent problem, there is such a phenomenon: ...
JavaScript selector functions querySelector and querySelectorAll
Table of contents 1. querySelector queries a sing...
How to use libudev in Linux to get USB device VID and PID
In this article, we will use the libudev library ...
Introduction to new features of ECMAscript
Table of contents 1. Default values for functio...
Use docker to build kong cluster operation
It is very simple to build a kong cluster under t...