CSS - Select last child which was visible using special class

Question

I'm trying to add some CSS on the last visible list item using pure CSS. Technically, I wanted to set margin-right to zero (0) on the last visible item. Before mark as duplicate, please understand the case.

The background story is all items are loaded during page load and enabled class was added after doing some Ajax response.

.ring-navigations__menu{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
.ring-navigations__menu___item{
    display: none;
    position: relative;
    padding: 20px;
    outline: none;
    border: 1px solid #d7c5c5;
    margin-right: 15px;
}
.ring-navigations__menu___item.enabled{
    display: block;
}
.ring-navigations__menu___item.enabled:last-child{
    margin-right: 0;
}

<ul class="ring-navigations__menu">
    <li class="ring-navigations__menu___item enabled">List Items</li>
    <li class="ring-navigations__menu___item">List Items</li>
    <li class="ring-navigations__menu___item enabled">List Items</li>
    <li class="ring-navigations__menu___item">List Items</li>
</ul>

Looking to handle those through Pure CSS (No JavaScript). Any help will be appreciated! Thanks!

If you're looking to a pure CSS solution, please remove the `javascript` tag — xKobalt, Jul 24 '20 at 07:34
I believe you should refer this, it will help you: https://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i — Pritesh, Jul 24 '20 at 07:54
[This](https://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css#answer-37588181) may help. — Getter Jetter, Jul 24 '20 at 08:00
@Pritesh `:last-of-type` won't help here. As it says it applies to elements which are the last of a given type in this case `li`. If the targeted `li` isn't the last one in the list `:last-of-type` will not work. — Getter Jetter, Jul 24 '20 at 08:04
@OlivierKrull can you please also make jsfiddle or something would be of great help to achieve the same in this case? — Pritesh, Jul 24 '20 at 08:12
@Pritesh Would be something like [this](https://jsfiddle.net/8htvpdm0/). But as the answer in my link says, the order of the DOM elements must be reversed. — Getter Jetter, Jul 24 '20 at 08:33

score 0 · Answer 1 · answered Jul 24 '20 at 07:46

0

You could try to add a class to a parent tag when your Ajax response is triggered like so :

.loaded .ring-navigations__menu___item.enabled{
    display: block;
}
.loaded .ring-navigations__menu___item.enabled:last-child{
    margin-right: 0;
}

answered Jul 24 '20 at 07:46

jrmy_o

148
9

CSS - Select last child which was visible using special class

1 Answers1