Having trouble getting CSS :last-of-type to work properly alongside :not?

Question

Having trouble getting CSS :last-of-type to work properly alongside :not?

I have encountered an issue with selecting the last list item in a specific case. I have a list of items where only one can be selected at a time, and when selected, it should be displayed at the top of the list using flex ordering. However, I am having trouble ensuring that the last selected item does not have a border. I have tried using various selectors, including

.selection li:not(.selected):last-of-type

, but the last-of-type selector is not behaving as expected. The problem arises when the last list item is the one selected, resulting in a double border at the bottom of the list instead of a single border coming from the unordered list element.

In my CSS code snippet, you can see the styles I applied and the selector causing the issue. I have also provided a Codepen snippet to demonstrate the problem.

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you for your help!

html css css-selectors flexbox

Answer 1

Answer №1

Consider taking a different approach with the following suggestions:

Eliminate the use of the :not selector completely
Add borders to the left, right, and top of the ul element only
Apply the bottom border specifically to the li elements

ul {
    display: flex;
    flex-direction: column;
    border-top: .15rem solid #666;
    border-left: .15rem solid #666;
    border-right: .15rem solid #666;
}

li { border-bottom: .15rem solid #666; }

Revised Codepen Link

Explanation on why your current selector is not functioning as expected:

.selection li:not(.selected):last-of-type { border-bottom: none; }

It seems like you are trying to target the last li element unless it has the class selected.

However, the last-of-type selector does not work based on classes but rather on DOM elements. This means that even if an li is hidden with display: none, it will still be selected by the specified selector.

6.6.5.9. :last-of-type pseudo-class

The :last-of-type pseudo-class represents the last sibling of its type among its parent's children elements.

_{source:
https://drafts.csswg.org/selectors-3/#last-of-type-pseudo}

For more information, check out: How to make nth-child selector skip hidden divs

Answer 2

Consider taking a different approach with the following suggestions:

Eliminate the use of the :not selector completely
Add borders to the left, right, and top of the ul element only
Apply the bottom border specifically to the li elements

ul {
    display: flex;
    flex-direction: column;
    border-top: .15rem solid #666;
    border-left: .15rem solid #666;
    border-right: .15rem solid #666;
}

li { border-bottom: .15rem solid #666; }

Revised Codepen Link

Explanation on why your current selector is not functioning as expected:

.selection li:not(.selected):last-of-type { border-bottom: none; }

It seems like you are trying to target the last li element unless it has the class selected.

However, the last-of-type selector does not work based on classes but rather on DOM elements. This means that even if an li is hidden with display: none, it will still be selected by the specified selector.

6.6.5.9. :last-of-type pseudo-class

The :last-of-type pseudo-class represents the last sibling of its type among its parent's children elements.

_{source:
https://drafts.csswg.org/selectors-3/#last-of-type-pseudo}

For more information, check out: How to make nth-child selector skip hidden divs

Answer 3

Answer №2

Instead of attempting to eliminate the border-bottom from the last unselected item (which can be difficult or even impossible in CSS), a simpler approach is to apply a border-top to each item and then remove the excess border from the visually superior item, which happens to be... .selected!
Your requirement for:

having a distinct border on my list elements than the overall outer border

is achievable with this solution.

View updated pen

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-top: .15rem dashed #666;
  background: lightblue;
}

.selection li.selected {
  order: 1;
  border-top: none;
  background: tomato;
}

/** Additional styles for context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }

<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="selected">3</li>
  </ul>
</div>

Answer 4

Instead of attempting to eliminate the border-bottom from the last unselected item (which can be difficult or even impossible in CSS), a simpler approach is to apply a border-top to each item and then remove the excess border from the visually superior item, which happens to be... .selected!
Your requirement for:

having a distinct border on my list elements than the overall outer border

is achievable with this solution.

View updated pen

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-top: .15rem dashed #666;
  background: lightblue;
}

.selection li.selected {
  order: 1;
  border-top: none;
  background: tomato;
}

/** Additional styles for context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }

<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="selected">3</li>
  </ul>
</div>

Answer 5

Answer №3

Think of this more like a clever workaround rather than a straightforward solution.

This demo serves to prove that with some CSS manipulation, it is indeed possible.

The highlighted element in yellow indicates the selection.

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-bottom: .15rem dashed #666;
}

div.selection li.selected {
  order: 1;
  background-color: yellow;
}

.selection li:nth-last-child(2) {
  order: 3;
}

.selection li:not(.selected):nth-last-child(2) {
  border-bottom: none;
}

.selection li.selected:nth-last-child(2) ~ li {
  border-bottom: none;
}


/** Non-essential styles for context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }
.selection {display: inline-block; width: 160px;}

<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">3</a></li>
    <li class="selected">2</li>
  </ul>
</div>
<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">3</a></li>
    <li><a href="">2</a></li>
  </ul>
</div>
<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li class="selected"><a href="">3</a></li>
    <li><a href="">2</a></li>
  </ul>
</div>

Answer 6

Think of this more like a clever workaround rather than a straightforward solution.

This demo serves to prove that with some CSS manipulation, it is indeed possible.

The highlighted element in yellow indicates the selection.

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-bottom: .15rem dashed #666;
}

div.selection li.selected {
  order: 1;
  background-color: yellow;
}

.selection li:nth-last-child(2) {
  order: 3;
}

.selection li:not(.selected):nth-last-child(2) {
  border-bottom: none;
}

.selection li.selected:nth-last-child(2) ~ li {
  border-bottom: none;
}


/** Non-essential styles for context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }
.selection {display: inline-block; width: 160px;}

<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">3</a></li>
    <li class="selected">2</li>
  </ul>
</div>
<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">3</a></li>
    <li><a href="">2</a></li>
  </ul>
</div>
<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li class="selected"><a href="">3</a></li>
    <li><a href="">2</a></li>
  </ul>
</div>

Having trouble getting CSS :last-of-type to work properly alongside :not?

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting the width of a nested iframe within two div containers

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

"When setting up a window.EventListener, the Div element fails to be hidden when setting its display property to 'none

Use jQuery ajax to send form data and display the received information in a separate div

Updating the style sheet of a selected menu item on an ASP.NET master page

When the columns start stacking in Bootstrap, the padding is disabled

What is the best way to showcase entire content over a background image on a mobile device?

Organizing my website directories using external tools

How can I bypass hotlink protection for RSS images?

What is the best way to layer a background image with a CSS gradient?

iOS 8: mysterious void found at the bottom of the Safari home screen page in full screen mode

What is the best way to ensure that pagination remains in a static position?

Inject AngularJS variable bindings into the view alongside HTML code

Concealing HTML content with a modal overlay

With the addition of a key element in the opening statement

Error in WebGL rendering: attribs are not configured properly

What is the best way to attach a button to a mat-drawer?

Bootstrap's (g-) gap feature seems to be malfunctioning, unfortunately

Show the meta-field mp3 and place it in a lightbox container on the portfolio page

What are the style attributes that can be edited in each ant design component?