CSS selector except the first element
CSS Selectors Except the First Element
In web development, we often need to use CSS to implement page styling. CSS selectors are an important tool for selecting and styling elements. In addition to common selectors like class, ID, and tag, there are specialized selectors that help us more precisely target the elements we need to style. This article will focus on how to use CSS selectors to select all elements except the first one.
:not()
The :not() selector is used to select all elements except a specific one. Its syntax is as follows:
:not(selector)
Where selector is any valid CSS selector. For example, we can use the :not() selector to select all paragraph elements except the first one:
p:not(:first-of-type) {
color: red;
}
This code selects all paragraphs that are not the first paragraph element and sets their text color to red.
:nth-child()
The :nth-child() selector is used to select an element at a specific position within a sibling element. Its syntax is as follows:
:nth-child(an + b)
Where a and b are both integers, an represents the nth element, and b represents the offset. For example, we can use the :nth-child() selector to select all list items except the first one:
li:nth-child(n + 2) {
background-color: lightgray;
}
This code selects all list items except the first one and sets their background color to light gray.
:nth-of-type()
The :nth-of-type() selector is similar to the :nth-child() selector, except that it only selects elements of a specific type. Its syntax is as follows:
:nth-of-type(an + b)
Similar to the :nth-child() selector, an and b are both integers, indicating the nth element of a particular type and offset. For example, we can use the :nth-of-type() selector to select all div elements except the first one:
div:nth-of-type(n + 2) {
border: 1px solid black;
}
This code selects all div elements except the first one and adds a black border to them.
Sample Code
Here is a simple HTML snippet with some paragraph and list item elements:
<!DOCTYPE html>
<html Tutorial">html>
<head>
<title>CSS Selectors Except the First Element</title>
<style>
p:not(:first-of-type) {
color: red;
}
li:nth-child(n + 2) {
background-color: lightgray;
}
div:nth-of-type(n + 2) {
border: 1px solid black;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<ul>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ul>
<div>First Div Element</div>
<div>Second div element</div>
</body>
</html>
Through the CSS style code above, we can see that the text color of all paragraphs except the first one has changed to red, the background color of all list items except the first one has changed to light gray, and a black border has been added to all div elements except the first one.
Summary
This article introduced how to use CSS selectors to select elements other than the first one. Using the :not() selector, the :nth-child() selector, and the :nth-of-type() selector, we can more precisely select the elements we want to style, providing more possibilities for page design.