CODEWITHSUNDEEP
htmlcss
Adam12344
Adam12344

Reputation: 1053

Wrapping multiple CSS elements under one id

I am trying to write CSS that only applies to certain Divs. I have code that works for this example, but I would like to do it in a way that doesn't require me to put .landing in front of every line

HTML

<div class="landing">
    <h1>Hey</h1>
    <p>Hi</p>
</div>
<div class="notlanding">
    <h1>Hey</h1>
    <p>Hi</p>
</div>

CSS

.landing h1{
    color: red;
  }
.landing p {
    color: blue;
  }

This produces what I want to accomplish, but is there a way to wrap both h1 and p in .landing?

Something like this

.landing {
   h1{
      color: red;
    }
  p {
      color: blue;
    }
 }

Upvotes: 1

Views: 781

Answers (3)

Jay Dee
Jay Dee

Reputation: 2646

Another way to achieve this is using Shadow DOM (not widely supported yet). Then, your landing div cound be a shadow root and could have its own stylesheet... this basically works in Angular 2 today.

Upvotes: 0

Leandro Gatti
Leandro Gatti

Reputation: 97

You could do that if we'd be using a css compiler like less or sass... I think you can't do it in pure css.

Upvotes: 1

Jaymin Panchal
Jaymin Panchal

Reputation: 2856

No this way you can not use in CSS.

But you can use SASS - Syntactically Awesome StyleSheet

http://sass-lang.com/

SASS allows you to write dynamic css like variable declaration and much more. Just check above link.

Upvotes: 1

Related Questions