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
Detailed explanation of the error problem of case when statement
Preface In the MySQL database, sometimes we use j...
Detailed explanation of MySQL basic operations (Part 2)
Preface This article contains 1. Several major co...
A brief discussion on the placement of script in HTML
I used to think that script could be placed anywh...
JS implements jQuery's append function
Table of contents Show Me The Code Test the effec...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...
Detailed explanation of CSS weight value (cascading) examples
•There are many selectors in CSS. What will happe...
Various transformation effects of HTML web page switching
<META http-equiv="Page-Enter" CONTENT...
Detailed explanation of common operations of Docker images and containers
Image Accelerator Sometimes it is difficult to pu...
How to monitor and delete timed out sessions in Tomcat
Preface I accidentally discovered that the half-h...
Detailed explanation of installing applications in Linux Centos7 without Internet connection
1. In the previous chapter, we learned that we ca...
VMware Tools installation and configuration tutorial for Ubuntu
Some time ago, the blogger installed the Ubuntu s...
Use vue to realize the registration page effect vue to realize SMS verification code login
This article example shares the specific code of ...
HTML+CSS implementation code for rounded rectangle
I was bored and suddenly thought of the implementa...
MySQL group by method for single word grouping sequence and multi-field grouping
I have created a goods table here. Let's take...
Analysis of the Principles of MySQL Slow Query Related Parameters
MySQL slow query, whose full name is slow query l...