- How to Select All Child Elements Except the Last One
- Create HTML
- Add CSS
- Example of selecting all child elements except the last one:
- Result
- Example of using CSS properties on all child elements except the last one:
- How can I select all children of an element except the last child?
- 11 Answers 11
- Make it simple:
- How to Select All Except Last Child In CSS » CSS Not Last Child Example
- HTML Markup
- CSS Basic Styles
- CSS Not Last Child Selection
- How to Select All Except Last Child In CSS » CSS Not Last Child Example
- HTML Markup
- CSS Basic Styles
- CSS Not Last Child Selection
How to Select All Child Elements Except the Last One
Sometimes, you may need to select all the child elements except the last element. It’s quite easy to do this using the :not and :last-child pseudo-classes.
The :not pseudo-class specifies elements that do not match a list of selectors and the :last-child selects the element if it is the last child among the other elements.
In our examples, we’ll use the following syntax:
Create HTML
nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav>Add CSS
- Specify the margin property for the element.
- Style and position elements inside using the text-transform, text-decoration, color, font-family, text-align, display and other properties.
- Use the :not and :last-child pseudo-classes for the elements inside and mention the style that should not be applied to the last child element.
nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; >Example of selecting all child elements except the last one:
html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; > nav a:not(:last-child) < border-right: 5px solid #193fe6; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>Result
So, we have created a navigation menu with elements separated by the right border except for the last element.
Let’s see another navigation menu, where we use some CSS properties on all child elements except the last one.
Example of using CSS properties on all child elements except the last one:
html> html> head> title>Title of the document title> style> nav < margin: 30px; > nav a < text-transform: capitalize; text-decoration: none; color: rgba(60, 60, 60); font-family: sans-serif; padding: 5px 5px; margin-top: 20px; width: 140px; text-align: center; display: inline-block; border: 1px solid #000000; border-radius: 10px; > nav a:not(:last-child) < background-color: #a2d4eb; > style> head> body> nav> a href="https://www.w3docs.com/learn-html.html">Learn HTML a> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> a href="https://www.w3docs.com/learn-git.html">Learn Git a> a href="https://www.w3docs.com/learn-javascript.html">Learn Javascript a> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> a href="https://www.w3docs.com/snippets">Snippets a> nav> body> html>How can I select all children of an element except the last child?
How would I select all but the last child using CSS3 selectors? For example, to get only the last child would be div:nth-last-child(1) .
11 Answers 11
You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn’t work in IE8 or below:
Make it simple:
You can apply your style to all the div and re-initialize the last one with :last-child:
for example in CSS:
.yourclass < border: 1px solid blue; >.yourclass:last-child
or in SCSS:
- easy to read/remember
- fast to execute
- browser compatible (IE9+ since it’s still CSS3)
Edit: I wrote this at a time :not was not covered by all browsers. Today I would be more balanced and would use this solution in some situations, for instance if you want to override a default behaviour.
For me at least, this has a bad code smell. You are knowingly applying a css rule to an element that you don’t want it to, only to then try to cake another layer to undo it. To me, that’s a bad code smell. I fear that kind of css coding can lead to harder and harder to maintain css. In other words, you’re building spaghetti code css.
this could also work but the problem is when you have many css style like (border, color, font-size etc.) you will need to initialize the css style again to the :last-child. So the suitable solution is using :not(:last-child)
How to Select All Except Last Child In CSS » CSS Not Last Child Example
By Joe ~ December 4, 2022
When you want to format a list of items like when creating a menu or styling a menu you need to get the styles applied to each item. A common requirement is to use CSS not last child option to select all other items in the list apart from the last child. If you are looking for a good example of CSS not last child selection rule, this is post will guide you.
HTML Markup
In this post, I will use HTML menu to illustrate how you can select all items except the last child using CSS.
The following is an example of the HTML markup for the menu with 4 items :
As you can see in the markup we have 4 list items. We intend to select all the 3 first items (Home, About, Contact) but leave the last one (Member)
CSS Basic Styles
We need to add some basic styles to make the menu appealing and easier to demonstrate how to select all items apart from the last child.
The following are some basic styles to improve the appearance of this menu:
The menu now appears as shown below :
CSS Not Last Child Selection
To style all the first three items and not the last child you need to use the :not(:last-child) selector as follows :
To illustrate how this works, we will apply an orange color to the other menu items except the last child shown on the image below:
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
How to Select All Except Last Child In CSS » CSS Not Last Child Example
By Joe ~ December 4, 2022
When you want to format a list of items like when creating a menu or styling a menu you need to get the styles applied to each item. A common requirement is to use CSS not last child option to select all other items in the list apart from the last child. If you are looking for a good example of CSS not last child selection rule, this is post will guide you.
HTML Markup
In this post, I will use HTML menu to illustrate how you can select all items except the last child using CSS.
The following is an example of the HTML markup for the menu with 4 items :
As you can see in the markup we have 4 list items. We intend to select all the 3 first items (Home, About, Contact) but leave the last one (Member)
CSS Basic Styles
We need to add some basic styles to make the menu appealing and easier to demonstrate how to select all items apart from the last child.
The following are some basic styles to improve the appearance of this menu:
The menu now appears as shown below :
CSS Not Last Child Selection
To style all the first three items and not the last child you need to use the :not(:last-child) selector as follows :
To illustrate how this works, we will apply an orange color to the other menu items except the last child shown on the image below:
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.