CODEWITHSUNDEEP
htmlcsssass
JGallardo
JGallardo

Reputation: 11373

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; }
}

Upvotes: 0

Views: 1987

Answers (1)

socki03
socki03

Reputation: 354

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

Upvotes: 3

Related Questions