Menu
I am trying to use create a separator between my links by creating a border on the right side of each of them. Then on the last one, remove it. I have the following html and css but what I'm finding is that each "a" tag matches the last-child selector. I'm not clear why and what the proper way would be to do this.
<ul class="nav">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
.nav a { border-right:solid 1px #000;}
.nav a:last-child { border-right-width:0px;}
491
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
f(n) = -n+3 f(0) = -0+3 = 3 <- 3rd row from the bottom f(1) = -1+3 = 2 <- 2nd row from the bottom f(2) = -2+3 = 1 <- 1st row from the bottom f(3) = -3+3 = 0 <- nothing f(3) = -4+3 = -1 <- nothing etc...
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.
There is a:not selector in css3. Use :not() with :last-child inside to select all children except last one. For example, to select all li in ul except last li, use following code.
That's because each a is the last-child of its parent li. You'd want something like .nav li:last-child a instead.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
