Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select all children of an element except the last child using CSS?
To select all children of an element except the last child using CSS we will be understanding two different approaches. Each approach will be using CSS pseudo-class selectors to perform the required task.
In this article, we'll see how to select all children of an element except the last child in CSS with different approaches. We will be discussing each approach in detail with examples that will help you understand how they work.
Syntax
/* Method 1: Using :not() pseudo-class */
parent > *:not(:last-child) {
/* styles */
}
/* Method 2: Using :nth-last-child() pseudo-class */
parent > *:nth-last-child(n+2) {
/* styles */
}
Method 1: Using :not() Selector
The first approach to select all children of an element except the last child involves using the :not() pseudo-class selector combined with :last-child pseudo-class selector.
- The :last-child pseudo-class selector selects the last child of an element
- The :not() pseudo-class selector selects all elements that do not match the specified selector
- Using
:not(:last-child)selects all children except the last one - The selector
.parent > *:not(:last-child)selects all immediate children of the .parent element except the last child
Example
Here is a complete example code implementing the :not() selector approach
<!DOCTYPE html>
<html>
<head>
<title>Select All Children Except Last Child</title>
<style>
.parent {
margin: 20px;
padding: 15px;
border: 2px solid #ccc;
}
.parent > *:not(:last-child) {
color: green;
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Select All Children Except Last Child Using :not() Selector</h3>
<div class="parent">
<h4>First Child</h4>
<p>Second Child</p>
<span>Third Child</span>
<div>Fourth Child (Last - Not Selected)</div>
</div>
</body>
</html>
The first three children (First Child, Second Child, Third Child) appear in green bold text with bottom margins, while the last child (Fourth Child) remains in default styling.
Method 2: Using :nth-last-child() Selector
In this approach, we use the :nth-last-child() pseudo-class selector which selects elements based on their position from the end of the children list.
- The selector
.parent > *:nth-last-child(n+2)selects all children except the last one - The argument
n+2selects the 2nd, 3rd, 4th... elements from the end, effectively excluding only the last child - This method is useful when you need more complex positioning logic
Example
Here is a complete example using :nth-last-child() selector to style buttons except the last one
<!DOCTYPE html>
<html>
<head>
<title>Select All Children Except Last Child</title>
<style>
.parent {
display: flex;
gap: 10px;
margin: 20px;
}
.parent > *:nth-last-child(n+2) {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-family: Arial, sans-serif;
}
.parent > *:last-child {
background-color: #f44336;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<h3>Select All Children Except Last Child Using :nth-last-child() Selector</h3>
<div class="parent">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4 (Last)</button>
</div>
</body>
</html>
Four buttons are displayed horizontally. The first three buttons have green backgrounds with white text, while the last button has a red background, clearly showing the selection difference.
Conclusion
Both :not(:last-child) and :nth-last-child(n+2) selectors effectively select all children except the last one. The :not() approach is more intuitive and readable, while :nth-last-child() offers more flexibility for complex positioning requirements.
13K+ Views
