sass :first-child not working

css sass pseudo-element
ApPeL picture ApPeL · May 2, 2011 · Viewed 142.3k times · Source

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 ?

Answer

nomadkbro picture nomadkbro · May 19, 2011

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.

Related questions

:after and :before pseudo-element selectors in Sass

How can I use the :before and :after pseudo-element selectors following the syntax of Sass or, alternatively, SCSS? Like this: p margin: 2em auto > a color: red :before content: "" :after content: "* * *" Of course, the above fails.

Read More
What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More
Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More