Home arrow Style Sheets arrow CSS Combinators: Working with Child Combinators
STYLE SHEETS

CSS Combinators: Working with Child Combinators


In this conclusion to a three-part series on combinators, you'll learn how to use the child combinator when building your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
February 06, 2012
TABLE OF CONTENTS:
  1. · CSS Combinators: Working with Child Combinators
  2. · Building a Drop-down Menu

print this article
SEARCH DEVARTICLES

CSS Combinators: Working with Child Combinators
(Page 1 of 2 )

If you're constantly in search of newer and more efficient methodologies that permit you to improve the overall quality of your CSS code, then take a peek at combinators. This underrated feature, bundled with the specification for a long time, will let you define the visual presentation of your web page elements by using fewer CSS classes and selectors. In this way, it can help you keep the markup much cleaner and unpolluted.

If you've already read the two previous parts of this tutorial, you now have a solid background on how to work with CSS combinators. In those pieces I developed some examples which demonstrated how to use the adjacent sibling (+) and general sibling combinators (~)  to selectively style some trivial paragraphs in an HTML document. As I just said, the entire styling process didn't require the definition of a bunch of additional classes or "ids." Not bad at all, right?

It's valid to stress, though, that this quick review of CSS combinators isn't over yet. I'd like to show you how to use the last one on this list, the popular child combinator (>). With that said, in this final part of the tutorial I'll be setting up a couple of hands-on examples. These will hopefully will provide you with the right pointers to start using the aforementioned combinator when building your own web pages.

Styling the First Descendants of an HTML Element

As its name suggests, the child combinator allows you to assign a set of styles to the first descendants of a given web page element. For obvious reasons, this can be really useful in a great number of use cases, where it's necessary to differentiate the immediate descendants from the rest and style them accordingly.

As always, the best way to get things rolling with the child combinator is by writing an example. Below I coded a trivial one, which uses the pertinent combinator to define the visual appearance of the paragraphs that are first descendants of a div which has been assigned a "container" class.

The example looks like this:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS combinators (child combinator)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
    color: #A43500;
}
.container {
    width: 600px;
    padding: 20px;
    margin-bottom: 20px;
    background: #FFFFFF;
    border: 2px solid #6C2300;
}
.container > p {
    color : #A43500;
    background: #FFF7F2;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Using CSS combinators (child combinator)</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>   
    <section>
        <h2>Content section</h2>   
        <div class="container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt.</p>
            <div>  
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt.</p>
            </div>
        </div>
    </section>
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
    </footer>
</div>
</body>
</html>

Even though the structure of the above web page is extremely simple, it shows in a nutshell the functionality of the child combinator. As you can see, in this case it has been used to assign some basic styles to the first descendant paragraph of the main containing div, while leaving the others untouched. 

If you want to see the output generated by the example, just take a look at the following screen capture:

There you have it. As the previous image depicts, the child combinator is hard to beat when you need to selectively style the descendants of an HTML element. Programmers have only neglected to use it for so long because of the buggy support it received from Internet Explorer.

But past things should stay in the past, so it's time to look ahead and attempt to recreate a more realistic scenario where the child combinator can be utilized successfully too. To do so, in the coming section I'll be showing you how to create a customizable drop-down menu, which will make use of the pertinent combinator to work as intended.   

To learn how this sample menu will be created, now jump forward and read the next few lines.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials