JGallardo JGallardo - 1 month ago 12
Sass (Sass) Question

Sass - selecting a header with specific role but not apply styling if has certain class

Question



How to nest the SCSS to apply styles to a
<header>
only if it has a
role="banner"
but it must not apply if the header has a class of
page-frontpage
. Then I will nest the style for the specific page inside.

Background



I am adding onto someone elses code, so not allowed to overwrite the first style written. I think there could be a problem if a header is used somewhere else, so i want to target the styles if it has a role of "banner". I am writing the style for the homepage, and my page has a different layout, so I want the previous styles to not be applied to my page.

I understand this is not the best way to do it, but I have to work within this scope.

Code



Here is my demo on codepen

HTML



The class is passed into the header based on what page is being viewed

<header role="banner" class="<?=$varCurrentPage?>">


SCSS



Original code

header{
text-align: center;
background-color: #444;
color: #fff;
min-height:80vh;
background-size:cover;
position:relative;
}


So far modified

header[role=banner] {

Answer

Here you go:

header[role="banner"]:not(.page-frontpage) {
    text-align: center;
    background-color: #444;
    color: #fff;
    min-height:10vh;
    background-size:cover;
    border: red 1px dotted;
    position:relative;
}