How to select an item that is into another item using CSS?

Question

in HTML I have the following structure:

    <div class="row" id="info-section">
        <div class="col-sm-4">

            <div class="panel panel-default">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>Calendario Eventi</h4></div>
                    <div class="panel-body">
                        <?php
                            // 'My_Widgtet_Area' area, where the id is called:
                            if (is_active_sidebar('calendar_widget_zone')) : ?>

                                <div id="widget-sidebar">
                                    <ul>
                                        <?php dynamic_sidebar('calendar_widget_zone'); ?>
                                    </ul>
                                </div><!-- #widget-sidebar .widget-area -->

                            <?php endif; ?>
                    </div>
                </div>
            </div>

        </div>

And now, using CSS I want select (to change a value) of the .panel-heading class that is into the #info-section div

What can I do to select only the .panel-heading item nested into #info-section div?

Tnx

Andrea

Answer 1

You can either use the nested or the in selector:

#info-section .panel-heading {
  /* css */
}

or you can use the child selector (which means that it should be inside the container, not inside of one of their children)

#info-section > .panel-heading {
  /* css */
}

Answer 2

Simply use the CSS selector:

#info-section .panel-heading{
  //css stuff here
}

Answer 3

Follow the yellow brick road :)

CSS

#info-section .panel-heading { 
    /* CSS STYLES */
}

Answer 4

CSS

#info-section .panel-heading{
  //Your Style
}