CODEWITHSUNDEEP
csssass
Sheharyar
Sheharyar

Reputation: 75820

Sass Selector: When a tag is not in another tag

I'm attempting to style different code blocks depending on which tag they are present in:

I know that I can just use the :not selector in plain :

pre > code {
  color: red;
}

:not(pre) > code {
  color: blue;
}

But using it in throws an error and fails to compile:

:not(pre) > code
  color: blue

Error:

Generating development JavaScript bundle failed



                     ^
      Invalid CSS after "...size: 1.5rem; }": expected 1 selector or at-rule, was "not(pre) : {"
      in /Users/Psy/my-app/src/styles/v3/base.sass (line 111, column 23)

File: src/styles/v3/base.sass

failed Re-building development bundle - 0.339s

What is the correct way to do the same in Sass?

To be clear: I'm not looking for other ways for "reorganizing" my Sass code. Instead, looking for an explicit selector where a tag is not inside another tag.

Upvotes: 1

Views: 274

Answers (2)

Sheharyar
Sheharyar

Reputation: 75820

Okay, I probably should've done this sooner, but I searched Github to see how other projects do the same.

Looks like while the :not selector works in SCSS the same way it works in CSS, we need to prefix the :not selector with * for SASS files:

*:not(pre) > code
  color: blue

This works without errors.

Upvotes: 2

doğukan
doğukan

Reputation: 27491

You don't have to use :not selector. You can simply style the code and code under pre tag. This will provide the intended result:

code {
  color: blue;
}

pre > code {
  color: red;
}

Upvotes: 1

Related Questions