How to nest the SCSS to apply styles to a
only if it has a
but it must not apply if the header has a class of
. Then I will nest the style for the specific page inside.
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.
Here is my demo on codepen
The class is passed into the header based on what page is being viewed
<header role="banner" class="<?=$varCurrentPage?>">
So far modified