Using SASS to Select All Elements Except the First

Image by Pexels from Pixabay

If you are a web developer there would be many times that you need to apply styles for all elements but the first. One place that instantly comes to mind is when styling breadcrumbs on a page.

There are a few different ways to do this, and options that first spring to my mind are to use:

• CSS :not(:first-child) Selector
• OR apply the style to all of the relevant elements then use :first-child to remove or override that style

But there is a way that I think is more preferable to do this and its using the & parent selector in SASS like this :

.breadcrumb {
      text-decoration: none;
      color: black;
  & + & {
        margin-left: 8px;
        &::before {
          content: '>';
          padding-right: 8px;  
       }
   }
}

All of the css under the & + & will be applied to every .breadcrumb except the first one.

& + & is a nested selector that targets an element with the class "breadcrumb" that appears immediately after another element with the same class. The & symbol is a special character in Sass that refers to the parent selector (in this case, .breadcrumb).

To see an example of this in action visit my codepen below

Happy coding!