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
Summary of mysqladmin daily management commands under MySQL (must read)
The usage format of the mysqladmin tool is: mysql...
How to solve the problem of forgetting the root password of Mysql on Mac
I haven't used mysql on my computer for a lon...
Setting up a proxy server using nginx
Nginx can use its reverse proxy function to imple...
Special commands in MySql database query
First: Installation of MySQL Download the MySQL s...
SQL Get stored procedure return data process analysis
This article mainly introduces the analysis of th...
Related operations of adding and deleting indexes in mysql
Table of contents 1. The role of index 2. Creatin...
How to use the Fuser command in Linux system
What is Fuser Command? The fuser command is a ver...
Significantly optimize the size of PNG images with CSS mask (recommended)
This article is welcome to be shared and aggregat...
HTML+Sass implements HambergurMenu (hamburger menu)
A few days ago, I watched a video of a foreign gu...
Windows Server 2008 Tutorial on Monitoring Server Performance
Next, we will learn how to monitor server perform...
VMwarea virtual machine installation win7 operating system tutorial diagram
The installation process of VMwarea will not be d...
Process parsing of reserved word instructions in Dockerfile
Table of contents 1. What is Dockerfile? 2. Analy...
CSS adaptive layout realizes the overall centering of sub-element items and left alignment of internal items
In daily work, we may encounter a layout like thi...
JavaScript implementation of carousel example
This article shares the specific code for JavaScr...
JavaScript static scope and dynamic scope explained with examples
Table of contents Preface Static scope vs. dynami...