Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 284
ApPeL Avatar asked May 02 '11 10:05

ApPeL


People also ask

How do I get my first child on SCSS?

If you want to select and style the first paragraph inside a container, whether or not it is the first child, you can use the :first-of-type selector, which, as the name suggests, will select the first element of its type, whether or not it is the first child of its parent.

How do you write nth child in sass?

Writing Complex :nth-child() Selectors It works exactly the same as :nth-child except that it starts from the end of the parent. For example, you can select the first three children of a parent by using the selector :nth-child(-n + 3) . You can use :nth-last-child(-n + 3) to select the last three.

How do you select the first element in CSS?

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.


2 Answers

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.

like image 145
nomadkbro Avatar answered Sep 20 '22 13:09

nomadkbro


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.

like image 29
IGRACH Avatar answered Sep 22 '22 13:09

IGRACH