'How to reference nested classes with css?

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.

htmlcssclassnested-class


Solution 1:[1]

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>

Solution 2:[2]

Selectors for classes in CSS need a ".":

.box1 .box-body i{/*your style*/}

Maybe you should take a look at this page:

Selectors

Solution 3:[3]

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

Solution 4:[4]

You just need to know how css selectors work. Here is brief description about css selectors.

In your case, 

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

space between two selectors defines second element is child of first. In your case, element i is child element of element which has box-body class. and that element is child element of class which has .box class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve
Solution 2 gmast
Solution 3 Mudassar Saiyed
Solution 4 Laxmikant Dange

Related Questions