Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Approaches to Select all Children of an Element Except the Last Child
Here is a list of approaches to select all children of an element except the last child using CSS which we will be discussing in this article with step-wise explaination and complete example codes.
Select Using :not Selector
In first approach to select all children of an element except the last child involves using the :not() pseudo-class selector and :last-child psuedo-class selector.
- We are using CSS :last-child psuedo-class selector, which selects the last child of an element.
- We will be using CSS :not() pseudo-class selector which will select all elements that do not match the specified selector.
- We will use ':last-child' along with ':not()' to select all children of element except the last child.
- We have used '.parent > *:not(:last-child)' which will select all the immediate children of the .parent class element except the last child.
Example
Here is a complete example code implementing above mentioned steps to select all children of an element except the last child.
<!DOCTYPE html>
<html>
<head>
<title>
To select all children of an element
except the last child using CSS.
</title>
<style>
.parent>*:not(:last-child) {
color: green;
}
</style>
</head>
<body>
<h3>
To select all children of an element
except the last child using CSS.
</h3>
<p>
In this example we have used :not() selector
and :last-child selector to select all
children of an element except the last child.
</p>
<div class="parent">
<h4>First Child</h4>
<h4>Second Child</h4>
<p>Third Child</p>
<span>Fourth Child</span>
</div>
</body>
</html>
Select Using :nth-last-child() Selector
In this approach, we are using CSS nth-last-child() pseudo-class selector which selects elements based on their position in the list of children of an element.
- We have used '.parent > *:nth-last-child(n+2)' to select all child element except last child.
- We have specified argument as n+2. The specified argument selects all elements of the HTML using CSS except for the last child, which is the first child from the end.
- We have used used CSS properties like: background-color, padding, color, border-radius, width, text-decoration, font-family and border to style all buttons except for the last button.
Example
Here is a complete example code implementing above mentioned steps to select all children of an element except the last child. In this example, we have applied style to each button except last button.
<!DOCTYPE html>
<html>
<head>
<title>
To select all children of an element
except the last child using CSS.
</title>
<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>
<h3>
To select all children of an element
except the last child using CSS.
</h3>
<p>
In this example we have used :nth-last-child()
selector to select all children of an element
except the last child.
</p>
<div class="parent">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
</body>
</html>
Conclusion
In this article, we understood how to select all children of an element except for the last child. We implemented two different approaches which are: by using CSS :not() selector and :nth-last-child() selector. Both approaches discussed above illustrates how CSS is useful in applying the different styles to all children of an element except for the last one.
12K+ Views
