Pseudo elements don't appear to work in Salesforce lightning CSS

Question

I have a list group that holds a bunch of attributes, but when I clarify that the last element within that group hold a margin of 0, the output doesn't match.

The Salesforce HTML:

<aura:iteration items="{!v.IdeasList}" var="idea">
            <li class="list-group-item">
                <a href="{!v.ideaDetailPath + idea.Id }" class="anchorLink"> 
                    <div class="prodname">{!idea.Title}</div>
                </a>
                <div class="ideaInfo"> 
                    <span class="points">{!idea.VoteTotal} points </span>
                    <span style="padding-right:24px;">
                    <span class="status">
                        {!idea.Status}
                    </span> 
                    </span>
                    <span class="createdDate"><ui:outputDate value="{!idea.CreatedDate}"/></span>
                    <!--span class="slds-avatar slds-avatar_circle slds-avatar_small">
                        <img src='{!idea.CreatorSmallPhotoUrl}'/>{!idea.CreatorName}</span>
                    <span class="slds-text-title_bold">
                        <a class="profileName" href="javascript:void(0)" 
                           id="profile-link"
                           data-createdByValue="{!idea.CreatedById}" 
                           onclick="{!c.openProfileWindow}">
                          {!idea.CreatorName}</a></span-->
                   <a class="slds-text-title_bold profileName" id="profile-link" data-createdByValue="{!idea.CreatedById}" href="javascript:void(0);" onclick="{!c.openProfileWindow}">
                       <span class="slds-avatar slds-avatar_circle slds-avatar_small slds-m-right_x-small">
                           <img src="{!idea.CreatorSmallPhotoUrl}"/>
                       </span>{!idea.CreatorName}
                    </a>
                </div>
                <div class="slds-border_bottom">
                </div>
            </li>
        </aura:iteration>

The Salesforce CSS:

.THIS .list-group-item {
    font-size: 12px;
    list-style: none;
    width: 100%;
    margin-bottom:24px;
}

.THIS .list-group-item:last-child{
    margin-bottom:0;
}

Does that mean pseudo elements (specifically last-child in this case) don't work in Salesforce Lightning CSS?

Answer 1

It seems that the only thing that works is :nth-last-child(2) - because for some reason, :last-child doesn't acknowledge that the last item is actually the last item.

I did a search within the HTML to check that there was no other element after the element I was hoping to edit via CSS, but there wasn't. Seems as though this is a salesforce bug? Anyway,s :nth-last-child(2) worked instead of :last-child