How to reference nested classes with css?

Tags: html,css,class,nested-class

Problem :

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 :</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 :</span></p>
      </div><!-- /.box-body -->
    </div><!-- /.box -->

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

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

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;}

Thanks in advance.

Solution :

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.


<div class="class"></div>
<div id="id"></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]

    CSS Howto..

    How to center two blocks with some gap inbetween using CSS?

    CSS Border Color: How to set bottom border color?

    How to choose fontstacks

    How can I convert an absolute file path to one CSS can use?

    How to color the first word using CSS

    How to create and edit a css file in browser Dom by javascript and then download it?

    Any ideas about how to use CSS to emulate a messy stamp?

    webkit just cuts off decimals in css number … how to workaround?

    How to move a carousel item to the middle when it's clicked in jquery

    how to give blur effect for css overflow visible content

    How do I control a css child property with javascript?

    Change jQuery slideshow script to rotate background image defined in css class

    How to reference another selector in css

    Show submenu with CSS without using an unordered list

    How to wrap text to the next line inside a DIV and not go off the screen

    How can I float a bunch of divs and still get overflow?

    How can I apply a CSS modification with a button [closed]

    How to hide a div from another div using CSS

    How can I use themeroller'ed styles in “regular” parts of a page?

    How can I apply a vertical scrollbar to a div with a percentage height?

    How to leave some top gap for H2 title tag with css

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to add a css class to jquery selectable

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    Nginx server (not showing changes) - Delete cache?

    How can i apply css stylesheet to single specific element?

    How to add background-image onto the first option of a dropdownlist

    How to enable CSS editing in Intellij

    How to set size of a checkbox in table vaadin

    How to add custom fonts [duplicate]