CODEWITHSUNDEEP
cssselector
user1676376
user1676376

Reputation: 31

its possible css selector inside another selector

sorry but it's confusing to me, somebody knows how it's possible or it's not possible..

#divp {
   background-color: lightgrey;
  .odiv {
      background-color: yellow;
      .pp  { background-color: black;   }
      a { color:red; }
   }
   .pp { background-color: lightgreen;  }
   a { color:blue; }
}

#divw {
   background-color: lightblue;
  .odiv {
      background-color: blue;
      .pp  { background-color: white;   }
      a { color:yellow; }
   }
   .pp { background-color: green;  }
   a { color:lightblue; }
}

i want create divs with internal css rules and i dont want to write all the time the same..... like

#diw .odiv .pp { background-color: white }
#diw .odiv .a { color: white }
#diw .odiv .other { color: blue }

is it possible?

Upvotes: 1

Views: 4275

Answers (3)

fish
fish

Reputation: 133

Beginning in 2023, you can use the & nesting selector to nest a style rule of a child inside its parent (caniuse link). See the following example:

a {
  color: red;
}

#div2 {
  background-color: pink;
  & a, span {
    color: blue;
  }
  & a:hover {
    color: black;
  }
}
<div id="div1">
<a href="">This link</a> is not <span>inside div2</span>.
  <div id="div2">
  <a href="">This link</a> is <span>inside div2</span>.
  </div>
</div>

Upvotes: 1

Fillip Peyton
Fillip Peyton

Reputation: 3657

It is not possible in standard CSS. But it is possible in Sass (and other CSS Preprocessors): http://sass-lang.com/guide#3

It works exactly as you posted in your question:

.div1{
  background-color: red;
  p{ font-size: 18px; }
}

Will output this:

.div1{ background-color: red }
.div1 p{ font-size: 18px; }

Check out http://sassmeister.com/ for a way to play around with Sass.

Upvotes: 0

Stefan Fisk
Stefan Fisk

Reputation: 1573

Nesting selectors is not possible, but you might want to checkout CSS preprocessors, which will let you do this. http://lesscss.org/ for example.

Upvotes: 3

Related Questions