[css] 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 ?

This question is related to css sass pseudo-element

The answer is


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.


First of all, there are still browsers out there that don't support those pseudo-elements (ie. :first-child, :last-child), so you have to 'deal' with this issue.

There is a good example how to make that work without using pseudo-elements:

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

       -- see the divider pipe example.

I hope that was useful.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to sass

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 How to fix ReferenceError: primordials is not defined in node Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` What is the difference between CSS and SCSS? Angular-cli from css to scss Why don’t my SVG images scale using the CSS "width" property? Angular CLI SASS options Error: Cannot find module 'gulp-sass' How to compile or convert sass / scss to css with node-sass (no Ruby)? Try reinstalling `node-sass` on node 0.12?

Examples related to pseudo-element

CSS pseudo elements in React Add line break to ::after or ::before pseudo-element content Using CSS :before and :after pseudo-elements with inline CSS? Combine :after with :hover Can I have multiple :before pseudo-elements for the same element? :after and :before pseudo-element selectors in Sass Creating a border like this using :before And :after Pseudo-Elements In CSS? css rotate a pseudo :after or :before content:"" Can I change the height of an image in CSS :before/:after pseudo-elements? Using :before CSS pseudo element to add image to modal