CODEWITHSUNDEEP
csslessmixins
Ordog
Ordog

Reputation: 173

Inherit styles from 2 other elements within the same container with .LESS

I'm new to .LESS and to avoid repeating the same rules for the declared elements within the same container I'd like to know if there is a cleaner way of doing it.

So far I have:

.outer-container {
 .inner-container1, .inner-container2 {
  padding: 0;
  margin-top: 8px;
  }
 .inner-container3 {
   background: none;
   border-top: none;
 }
}

What I'd like is for .inner-container1, .inner-container2 and .inner-container3 to have font-size: 12px without having to repeat it in each. Is that possible please?

Upvotes: 0

Views: 70

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

You could simply use css attribute selector. 

div[class^="inner-container"]

will select all divs matching class starting with inner-container

More info about attribute selectors in css MDN

div[class^="inner-container"] {
    font-size: 12px;
}
<div class="outer-container">
  <p>I'm an outsider :(</p>
  <div class="inner-container1">
    <p>Dude, i'm in </p>
  </div>
  <div class="inner-container2">
    <p>me too!!<p> 
  </div>
</div>

Upvotes: 2

Related Questions