How to reference nested classes with css?

Question

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>

You need to put a full-stop / period in your class statements .box1 .box-body i{width: 30px;} — Paulie_D
– Paulie_D, Commented May 28, 2015 at 11:27
Take a look at this great tutorial about selectors: code.tutsplus.com/tutorials/… — dingo_d
– dingo_d, Commented May 28, 2015 at 11:29

Patrick · Accepted Answer · 2022-05-06 18:51:23Z

41

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 div
div {
[some styling]
}

edited May 6, 2022 at 18:51

Patrick

14.8k7 gold badges34 silver badges43 bronze badges

answered May 28, 2015 at 12:02

Friendly Crook

1,1981 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve · Accepted Answer · 2015-05-28 11:27:39Z

3

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>

answered May 28, 2015 at 11:27

Steve

9,63511 gold badges57 silver badges86 bronze badges

Comments

gmast · Accepted Answer · 2015-05-28 11:29:16Z

1

Selectors for classes in CSS need a ".":

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

Maybe you should take a look at this page:

Selectors

answered May 28, 2015 at 11:29

gmast

1928 bronze badges

Comments

Mudassar Saiyed · Accepted Answer · 2015-05-28 11:35:32Z

1

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

answered May 28, 2015 at 11:35

Mudassar Saiyed

1,14810 silver badges21 bronze badges

Comments

Laxmikant Dange · Accepted Answer · 2015-05-28 11:28:40Z

-1

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.

answered May 28, 2015 at 11:28

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to reference nested classes with css?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related