I have a list of elements, which are styled like this:
ul {_x000D_
list-style-type: none;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
li {_x000D_
display: inline;_x000D_
}_x000D_
_x000D_
li:not(:last-child):after {_x000D_
content:' |';_x000D_
}<ul>_x000D_
<li>One</li>_x000D_
<li>Two</li>_x000D_
<li>Three</li>_x000D_
<li>Four</li>_x000D_
<li>Five</li>_x000D_
</ul>Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five
Anyone know how to CSS select all but the last element?
You can see the definition of the :not() selector here
This question is related to
css
css-selectors
pseudo-element
The answer is
An example using CSS
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
Your sample does not work in IE for me, you have to specify Doctype header in your document to render your page in standard way in IE to use the content CSS property:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</html>
Second way is to use CSS 3 selectors
li:not(:last-of-type):after
{
content: " |";
}
But you still need to specify Doctype
And third way is to use JQuery with some script like following:
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("li:not(:last)").append(" | ");
});
</script>
Advantage of third way is that you dont have to specify doctype and jQuery will take care of compatibility.
You can try this, I know is not the answers you are looking for but the concept is the same.
Where you are setting the styles for all the children and then removing it from the last child.
Code Snippet
li
margin-right: 10px
&:last-child
margin-right: 0
Image
Your example as written works perfectly in Chrome 11 for me. Perhaps your browser just doesn't support the :not() selector?
You may need to use JavaScript or similar to accomplish this cross-browser. jQuery implements :not() in its selector API.
Remove the : before last-child and the :after and used
ul li:not(last-child){
content:' |';
}
Hopefully,it should work
For me it work fine
&:not(:last-child){
text-transform: uppercase;
}
Every things seems correct. You might want to use the following css selector instead of what you used.
ul > li:not(:last-child):after
Source: Stackoverflow.com