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.

http://lesscss.org/

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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -