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

Sass - Target an ID restrict certain styles if it has matching class then add other styles set by class

Question



I need to target a
<section>
with a specific ID that will show up once in every page. But each will have a unique class. Some of the styles for the section will not apply if that class is added dynamically. Trying to figure out how to best nest the styling using Sass.

Code



Demo



Here is a demo on CodePen.
Because it has the class of
.soldout
, the background should be grey not red.

enter image description here

HTML



<section id="featured-product" class="soldout">
<h1>This car is no longer avaiable</h1>
<img src="https://img.gta5-mods.com/q95/images/2013-lamborghini-veneno-hq-digitaldials/bb4811-venenomain.jpg">
</section>


SCSS



#featured-product {
/* these styles always apply */
color: #f1f1f1;
font-family: 'Oswald', sans-serif;
text-align:center;


/* These classes should not apply if the section has a class of .soldout */
background: #FC332E;
padding: 25px 30px 45px;

& .soldout {
/* These styles only apply when the element has matching ID and this class added in*/
background: #BDBEBA;
padding: 25px;
}
img { width: 400px; }
}

Answer

Remove the space between & and .soldout {

&.soldout {

The way you had it, was you were looking for .soldout WITHIN #featured-product because you had the space.

You weren't looking for #featured-product WITH the class of .soldout