sass :first-child not working

I have not been using SASS for a very long time and wanted to know if there are some issues with pseudo-elements such as :first-child or :last-child ?


While @Andre is correct that there are issues with pseudo elements and their support, especially in older (IE) browsers, that support is improving all the time.

As for your question of, are there any issues, I'd say I've not really seen any, although the syntax for the pseudo-element can be a bit tricky, especially when first sussing it out. So:

div#top-level
  declarations: ...
  div.inside
    declarations: ...
    &:first-child
      declarations: ...

which compiles as one would expect:

div#top-level{
  declarations... }
div#top-level div.inside {
  declarations... }
div#top-level div.inside:first-child {
  declarations... }

I haven't seen any documentation on any of this, save for the statement that "sass can do everything that css can do." As always, with Haml and SASS the indentation is everything.


I think that it is better (for my expirience) to use: :first-of-type, :nth-of-type(), :last-of-type. It can be done whit a little changing of rules, but I was able to do much more than whit *-of-type, than *-child selectors.


This is how I usually write pseudo-elements :first-child, :last-child and :nth-child(n) in sass

.my-class {
    &:first-child {
       // your css code             
    }

    &:last-child {
       // your css code             
    }

    &:nth-child(2) {
       // your css code             
    }
}