Web Front-end
CSS Tutorial
How to select all child elements of an element (except the last one) using CSS?
How to select all child elements of an element (except the last one) using CSS?
CSS is a commonly used web page style. When developing web applications, we sometimes need to apply different styles to different elements. This common requirement is to select all child elements of an element except the last one! Apply CSS to select all child elements of an element (except the last child element).
In this article, we will see how to select all but the last child element in CSS using different methods. We'll discuss each method and its syntax in detail, along with examples to help you understand how they work.
The first way to select all child elements except the last one involves using the :not() selector, which allows you to select all elements that do not match a specific selector. The second method involves using the :nth-last-child() selector, which selects all elements that are the nth child from the end of the parent element. In this method, we specify the n 2 parameter, which helps select all the child elements of the element (except the last child element in HTML).
Both methods are very useful when developing web applications, and they may help implement the UI required for the web page. Using the selectors discussed above helps us understand how these selectors work, and we can create custom styles for functionality and UI for our web pages.
Method 1: Use :not selector
- The not selector is a powerful CSS selector that allows you to select all elements except those that match a specific condition. To select all child elements except the last one, we can use :not selector with :last-child selector.
To use the - not() selector to select all children of an element (except the last child), we use it with the :last-child selector. :last-child selector helps to select the last child element of an element. By using a combination of this approach with two selectors, we can select all child elements of an element except the last one.
The following is the syntax for how to use the :not() selector to select all child elements of the parent element (except the last child element) -
grammar
In the syntax below, .parent is the selector for the parent element, > selects all its direct child elements, * selects all child elements, and :not(:last-child) excludes the last child element from selection.
.parent > *:not(:last-child) {
/* styles for all children except the last one */
}
Example
In this example, the CSS selector .parent > *:not(:last-child) selects all direct children of the .parent class element (that is, h1, h2, p, and span elements), except the last child element , that is, element. Using CSS, we apply the "color" property to the first three child elements of the .parent element (i.e. the h1, h2 and p elements), while the fourth child element (i.e. the element) is not affected.
Now let’s see how to apply the CSS code to the code of the HTML page -
<!DOCTYPE html>
<html >
<head>
<style>
.parent > *:not(:last-child) {
color: green;
}
</style>
</head>
<body>
<div class="parent">
<h1>First Child</h1>
<h2>Second Child</h2>
<p>Third Child</p>
<span>Fourth Child</span>
</div>
</body>
</html>
Method 2: Use:nth-last-child() selector
- The nth-last-child() selector is another useful tool in CSS that allows you to select an element based on its position in the element's list of children. We can use this to select all but the last child by using :nth-last-child(n 2) to select all but the last child.
To use the :nth-last-child() selector to select all child elements except the last child element, we can specify the n 2 parameter. The parameters defined use CSS to select all elements of the HTML except the last child element, which is the last child element.
The following is the syntax for how to use the :nth-last-child() selector to select all child elements of the parent element (except the last child element) -
grammar
In the following syntax, .parent is the selector of the parent element, > selects all its direct child elements, * selects all child elements, :nth-last-child(n 2) selects all but the last one Child element children.
.parent > *:nth-last-child(n+2) {
/* styles for all children except the last one */
}
Example
In this example, the CSS selector .parent > *:nth-last-child(n 2) selects all direct child elements of the .parent class element, except the last child element. Here, all button elements inside the .parent element will be selected, but the last button element will not be selected.
Multiple CSS properties have been applied to the first three buttons, but the CSS style is not added to the last child button.
Now let’s see how to apply the CSS code to the code of the HTML page -
<!DOCTYPE html>
<html >
<head>
<style>
.parent > *:nth-last-child(n+2) {
background-color: green;
padding: 10px;
color: white;
border-radius: 10px;
width: 10em;
text-decoration: none;
font-family: sans-serif;
border: none;
}
</style>
</head>
<body>
<div class="parent">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。
The above is the detailed content of How to select all child elements of an element (except the last one) using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
