Monday, September 22, 2014

Nest one style within another in CSS.

Herein, in order to decorate an element with "Bar" and have it actually use the class, "Bar" must sit within another element decorated with "Foo" at its id designation.

#Foo{
   width: 400px;
   height 200px;
   padding-top: 10px;
   background-color: #0000FF;
   .Bar {
      width: 400px;
      height 100px;
      background-color: #FFFF00;
   }
}

 
 

Addendum 9/30/2014: This is not true at all. You may do this sort of thing in LESS which complies to CSS like this:

#Foo{
   width: 400px;
   height 200px;
   padding-top: 10px;
   background-color: #0000FF;
}
#Foo .Bar {
   width: 400px;
   height 100px;
   background-color: #FFFF00;
}

 
 

Immediately above is how to do CSS nesting.

No comments:

Post a Comment