last-child and last-of-type not working in SASS

Question

How would you write this to be SASS compliant?

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0;         


        

Answer 1

Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..

I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.

http://codepen.io/Ne-Ne/pen/xlbck

Just my thoughts..

Answer 2

Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}

Answer 3

Neither of the above worked for me, so.

last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:

<div class="top-level">
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="somethingelse"></div>
</div>

To get to the last div with the class of middle, doesn't work using last-of-type.

My workaround was to simply change the type of element that somethingelse was

Hope it helps someone out, took me a while to figure that out.