Override CSS style in child div

Problem

I have slideshow banner which I am using CSS to give style to text. I just wanted to change style for one of the banner and could not able to override it. The HTML part looks like this

<div id="banner" class="clearfix">
        <div id="cycle_nav"></div>

        <div class="slide">
            <img src="<?php echo site_url(); ?>image/banner1.jpg" />
            <div class="banner-text-right">
                <h3>#ITExt is here</h3>
                <p> movement.</p>
                <a href="/text" class="red-button">Learn More</a>
            </div>
        </div> -->
        <!--<div class="slide">
            <img src="<?php echo site_url(); ?>image/banner2.jpg" />
            <div id="banner-text3">
                <h3>heading</h3>
                <p>paragraph</p>
                <a href="/take_action" class="red-button">Send Notes</a>
            </div>
        </div>-->
        <div class="slide">
            <img src="<?php echo site_url(); ?>image/banner3.jpg" />
            <div id="banner-text">
                <h3>INTRODUCING New</h3>  // I WANT THIS BLACK
                <p>Help</p>               // I WANT THIS BLACK
                <a href="/link" class="red-button" Now</a>
            </div>
        </div>

        </div>

Css Part looks like this

#banner h3{
    text-align:left;
    font-family: 'HelveticaNeueLTCom-BdCn';
    font-size:64px;
    color:#fff;
    padding-top:86px;
}


#banner p{
    text-align:left;
    font-family: 'Georgia';
    font-size:24px;
    color:#fff;
    line-height:30px;
}

So it is giving white text but I wanted to change text just for last banner and want to make heading and prargraph black. So I created new div id and added css property but it is not changing. Please help.

Problem courtesy of: webmajic

Solution

Try using child selectors like so:

#banner > .slide > #banner-text > h3 {
color:#000;
}

#banner > .slide > #banner-text > p {
color:#000;
}

Also, you could accomplish what you are trying to do without adding extra ID's and classes by utilizing the :last-child psuedo class.

For instance:

#banner > .slide:last-child > h3 {
    color:#000;
}
#banner > .slide:last-child > p {
    color:#000;
}
Solution courtesy of: Mastrianni

Discussion

The simplest way:

#banner .black {
    color: #000
}

<h3 class="black">...</h3>
Discussion courtesy of: Tomáลก Blatný

This recipe can be found in it's original form on Stack Over Flow.