CSS Shorthand available? -
let's have following markup.
<div class="parent1"> <div class="inner1"></div> <div class="inner2"></div> </div> <div class="parent2"> <div class="inner1"></div> <div class="inner2"></div> </div>
if want style inner1 of parent1 can follows.
.parent1 .inner1{}
however if want specify different styles each of inner containers have write .parentx in each statement. question can nest css statements? logic resemble following:
.parent1{ .inner1{} .inner2{} } .parent2{ .inner1{} .inner2{} }
css not allow nesting. however, clever guys these days came concept of pre-compiled css, such sass, less etc.
for example, in less allowed:
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; { text-decoration: none; &:hover { border-width: 1px } } } }
but if stuck raw css, @brian suggested in answer best option:
.parent1 .inner1, .parent1 .inner2 { /*styles*/ } .parent2 .inner1, .parent2 .inner2 { /*styles*/ }
Comments
Post a Comment