Search code examples
sasscss-selectors

SASS select last element from a last element

I have difficulties to add border to the last class="separator" from the last class="list-group". I want to do this in SASS. Can someone please help me, because my solution doesn't work.

HTML

<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator"></div>
</div>

CSS

.list-group {
    &:last-child .separator {
        border-left: 1px solid black;
    }
 }
Solution

  • According to me there is no problem in your sass code. Just add some content into html and the browser will start showing border. Something like this

    <div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item1</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item2</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item3</div>
</div>
<div class="list-group">
    <div class="list-group-item"></div>
    <div class="separator">item4</div>
</div>

    Output (for your reference):

    html output

    can you spot the left border on item4?