How to select the first element with css selector

How to select the first element in the css selector: 1. Use the "first-child" selector to select the first child element belonging to its parent element; 2. Use "last-child" to select the last element in the list A label; 3. Use "nth-child(3)" to select the 3rd label and so on.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

What element is selected using a selector in css?

How to use selector to select which element in css? The following article will introduce to you how to use CSS selectors to achieve the effect of selecting the first element. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In front-end development, we may encounter such needs: we want the first part of the list to display different styles, we want the even parts of the list to display different background colors, we want the list to display different background colors. The last part of the style is different... How can we achieve this requirement?

In fact, if the previous file is developed in PHP, it can be achieved by judging the css style of the PHP loop statement. However, if it is static code, PHP cannot be used.

At this time, we can also achieve it through CSS. CSS provides us with several very useful style parameters: first-child, last-child, nth-child(n). Below, take a closer look at their use.

1. first-child

The first-child selector is used to select the specified selector that belongs to the first child element of its parent element.

Select the background color of the first li module in the li list.

li:first-child{background:#090}

2, last-child

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

li:last-child{background:#090}

3, nth-child(3)

means selecting the third label, the code is as follows:

li:nth-child(3){background:#090}

3 in the above code can also be changed to other numbers, such as 4, 5, etc. If you want to choose a label, just fill in the number.

4, nth-child(2n)

This means selecting the even-numbered tags in the list, that is, selecting the 2nd, 4th, 6th... tags.

5, nth-child(2n-1)

This means selecting the odd tags in the list, that is, selecting the 1st, 3rd, 5th, 7th... tags.

6, nth-child(n 3)

This means that the tags in the selection list start from the 3rd to the end.

7, nth-child(-n 3)

This means that the labels in the selection list are from 0 to 3, that is, labels less than 3.

8, nth-last-child(3)

This represents the third-to-last tag in the selection list.

Recommended: "css video tutorial"

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