CSS last-child on list with <a> tags surrounding each <li>

last-child css
css last-of class
css last-child with class
styled-components last-child
css last-child of-type
last-child css not working
css last-of-type class
nth-last-child

I have a simple <ul> menu with some list items. I used the :last-child pseudo class to apply a right border to the last list item. Each previous list item has only a left border. It looked fine, until I modified my HTML code to surround the list items with <a> tags. I did this because I wanted the entire list item to be a clickable link. Unfortunately, that broke my design because now, each list item was the last-child since it was nested within an <a> tag. So now every list item has a left and right border. How can I have the the right border only on the last list item and still retain a full clickable list item?

Here's the HTML I was using to test:

<div class="tabs">
    <div class="tabs__tab-list">
        <ul>
            <a href=""><li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Types</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Relationships</li></a><!--
       --></ul>
    </div>
</div>

And the CSS:

.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}

.tabs__tab-list {
    display: block;
    padding-left: 30px;
}

.tabs__tab-list-item {
    display: inline-block;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px 5px 5px;
    color: black;
}

.tabs__tab-list-item:hover {
    background-color: #E8E8E8;
}

.tabs__tab-list-item:active {
    background-color: white;
}

 .tabs__tab-list-item:last-child {
    border-right: 1px solid black;
}

.tabs__tab-list-item--current {
    background-color: white;
}

I think you just need to move the <a/> tags inside the <li/> tags, and set the .tabs__tab-list-item to display: inline;. See the snippet below

html, body{
  width: 100%;
}
.tabs {
  width: 70%;
  margin: 20px;
  display: block;
}

.tabs__tab-list {
  display: block;
  padding-left: 30px;
}
.tabs__tab-list > ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
 }

.tabs__tab-list-item{
  flex: 1 1 auto;
  border-left: 1px solid black;
  border-top: 1px solid black;
  background-color: lightgray;
  color: black;
}
.tabs__tab-list-item a{
  padding: 5px 10px 5px 5px;
  display: block;
  white-space: nowrap;
}

.tabs__tab-list-item:hover {
  background-color: #E8E8E8;
}

.tabs__tab-list-item:active,
.tabs__tab-list-item--active{
  background-color: white;
}

.tabs__tab-list-item:last-child {
  border-right: 1px solid black;
}

.tabs__tab-list-item--current {
  background-color: white;
}
<div class="tabs">
  <div class="tabs__tab-list">
    <ul>
      <li class="tabs__tab-list-item tabs__tab-list-item--active">
        <a href="">Look Ups</a>
      </li>
      <li class="tabs__tab-list-item">
        <a href="">Look Up Types</a>
      </li>
      <li class="tabs__tab-list-item">
        <a href="">Look Up Relationships</a>
      </li>
    </ul>
  </div>
</div>

:last-child, Beginning with Selectors Level 4, this is no longer required. Syntax. :last-child. Examples. Basic example. HTML. <div>� The :last-child CSS pseudo-class represents the last element among a group of sibling elements. /* Selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } Note : As originally defined, the selected element had to have a parent.

The correct selector is now

a:last-child .tabs__tab-list-item

.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}

.tabs__tab-list {
    display: block;
    padding-left: 30px;
}

.tabs__tab-list-item {
    display: inline-block;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px 5px 5px;
    color: black;
}

.tabs__tab-list-item:hover {
    background-color: #E8E8E8;
}

.tabs__tab-list-item:active {
    background-color: white;
}

 a:last-child .tabs__tab-list-item {
     background-color: lightblue;
    border-right: 1px solid black;
}

.tabs__tab-list-item--current {
    background-color: white;
}
<div class="tabs">
    <div class="tabs__tab-list">
        <ul>
            <a href=""><li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Types</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Relationships</li></a><!--
       --></ul>
    </div>
</div>

:last-child, This reveals the power of :last-child : it can identify an element with relation to all of its siblings, not just siblings of the same type. The more� The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Now you need to target the last <a> in the list, instead of

.tabs__tab-list-item:last-child

use

.tabs__tab-list a:last-child

CSS: :last-child on list item, That's not possible yet. :last-child selects the last child, regardless of the tag name, etc. The possible alternative, :last-of-type selects the last� 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. Tip: Look at the :nth-last-of-type() selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child.

Surrounding the list items with a tags is invalid HTML. Just place the content of the list items into divs, and surround these divs with a tags and style them.

<div class="tabs">
  <div class="tabs__tab-list">
    <ul>
      <li class="tabs__tab-list-item tabs__tab-list-item--active">
        <a href=""><div>Look Ups</div></a>
      </li>
      <li class="tabs__tab-list-item">
        <a href=""><div>Look Up Types</div></a>
      </li>
      <li class="tabs__tab-list-item">
        <a href=""><div>Look Up Relationships</div></a>
      </li>
    </ul>
  </div>
</div>

CSS/Selectors/pseudo-classes/:last-child, Example. The following selector represents a list item li that is the last child of an ordered list ol: [style.css] ol > li:last-child{ color: red; }. [index.html] <body> <ol>� The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end. /* Selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; }

CSS :last-child selector, This CSS tutorial explains how to use the CSS selector called :last-child with syntax and examples. The CSS :last-child selector allows you to target an element� CSS | :not(:last-child):after Selector Often we encounter a situation in front-end web development where we have a number of elements in HTML and we need to give a specific style to just the last element or to every element except the last element or basically to that element which cannot be selected directly.

:last-child, :last-child is a pseudo-class which selects the target element if it is the comes before the unordered list in the above source code example,� In Example 1, we used :last-child to specify that the words in the third (and last) paragraph have a font size of 18px, which is larger than that of the other paragraphs. Example 2: Use :last-child to change the last list item. CSS Declaration

nth last child - CSS Selectors, CSS Code Example. Counting upward from the last element to the target element : <style> li:nth-last-child(2) { color: red; } </style> <ul> <li>List item</li> <li>List� The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Comments
  • You should not wrap your <li>s with the <a> element. This is invalid HTML markup!
  • Thanks for the example. I wanted to have the entire "tab" be clickable, so instead I think I need to abandon the entire unordered list and just use <div> with inline-block display. Is it incorrect syntax to surround a <div> tag with <a>?
  • @Sabien I updated the answer to make the anchors the full size of the tab.
  • Thanks. After reading the CSS changes and looking up the properties I don't know, it looks like what makes the "clickable" area expand is the flex: 1 1 auto property, is that right? Thanks for the update, this is the best of both worlds, retaining the HTML markup for meaning while doing what I want it to do and being correct HTML.
  • This works exactly how I want it to, but other answers have said that this is wrong because it's not correct HTML. Why does the browser render it correctly if it's not correct HTML?
  • Yes, it's true that it is not correct HTML. The li should be direct descendants of ul. But the browsers don't really care about this. Also, since you are not using the list display, you can change the ul and the li for other types. You could use navbar instead of ul, and span instead of li, for instance, and everybody will be happy
  • Thanks. Knowing this was not the correct syntax for HTML prompted me go in a different direction without using an unordered list. I want the entire box clickable, not just the text.