How to reference nested classes with css?

Question

When using css, how can I specify a nested class.

Here is my html code:

<div class="box1">     <div class="box box-default">       <div class="box-header with-border">         <h3 class="box-title">Collapsable</h3>         <div class="box-tools pull-right">           <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>         </div><!-- /.box-tools -->       </div><!-- /.box-header -->       <div class="box-body">         <p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p>         <p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p>         <p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p>         <p><i class="fa fa-envelope"></i><span style=""> Email : [email protected]</span></p>       </div><!-- /.box-body -->     </div><!-- /.box --> </div> 

This css code works correctly for the all the html on the page:

<style type="text/css">     i{width: 30px;} </style> 

How can I specify the i class in the box1 box-body class?

Here is the code that I have tried:

<style type="text/css">     box1 box-body i{width: 30px;} </style> 

Thanks in advance.

Answer 1

In CSS, classes need to be prefixed by a ., ids need to be prefixed by #, and elements don't need to be prefixed at all.

This is how you need to declare your CSS:

.box1 .box-body i {    width: 30px; } 

Note that box1 and box-body are both classes, while i is an element.

---

Example:

<div class="class"></div> <div id="id"></div> <div></div> 

I have listed three different <div> elements. This is how they would be accessed in CSS:

// first div .class { [some styling] }  // second div #id { [some styling] }  // third div div { [some styling] } 

Answer 2

The classes in your CSS need periods before them. Note i doesn't since it's an element not a class.

<style type="text/css">     .box1 .box-body i{width: 30px;} </style>