When using CSS, how can I specify a nested class?
Here is my HTML markup:
<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>Best Answer
In CSS, classes are prefixed by a ., ids are prefixed by #, and elements are not 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 divdiv {[some styling]}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>Selectors for classes in CSS need a ".":
.box1 .box-body i{/*your style*/}Maybe you should take a look at this page:
Selectors
<style type="text/css">.box1 .box-body i{width: 30px;}</style>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.