Home > Web Front-end > CSS Tutorial > How to get the first element in css

How to get the first element in css

藏色散人
Release: 2020-11-30 10:35:35
Original
6678 people have browsed it

How to get the first element in css: 1. Get the 3rd tag in the list through the "nth-child(3)" method; 2. Get the list through the "nth-child(2n)" method The even labels in the list; 3. Get the odd labels in the list through the "nth-child(2n-1)" method, etc.

How to get the first element in css

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

CSS selects which label element: nth-child(n), first-child, last-child

Foreword: The requirement encountered when coding today is to select the first two tag elements, check the data and record it~

nth-child (n), first-child, last-child usage

Note: The nth-child(n) selector matches the nth child element in the parent element.

n can be a number, a keyword, or a formula.

nth-child(n) usage:

1, nth-child(3)

represents the third label in the selection list, the code is as follows:

li:nth-child(3){background:#fff}
Copy after login

2, nth-child(2n)

means selecting even-numbered tags in the list, that is, selecting the 2nd, 4th, 6th... tags, the code is as follows:

li:nth-child(2n){background:#fff}
Copy after login

3. nth-child(2n-1)

means selecting odd tags in the list, that is, selecting the 1st, 3rd, 5th, 7th... tags, the code is as follows:

li:nth-child(2n-1){background:#fff}
Copy after login

4. nth-child(n 3)

means that the tags in the selection list start from the 3rd to the end. The code is as follows:

li:nth-child(n+3){background:#fff}
Copy after login

5.nth-child(-n 3)

means that the tags in the selection list are from 0 to 3, that is, tags less than 3. The code is as follows:

li:nth-child(-n+3){background:#fff}
Copy after login

6, nth-last-child(3)

means Select the third-to-last tag in the list, the code is as follows:

li:nth-last-child(3){background:#fff}
Copy after login

first-child usage:

1, first-child

first-child indicates the selection list first label. The code is as follows:

li:first-child{background:#fff}
Copy after login

last-child usage:

1, last-child

last-child represents the last tag in the selection list, the code is as follows:

li:last-child{background:#fff}
Copy after login

The above is the detailed content of How to get the first element in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template