Home arrow Style Sheets arrow Page 2 - 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 - Building a Drop-down Menu
(Page 2 of 2 )

As I noted in the previous section, one typical use case where the child combinator shows its real power is when building a drop-down menu (like the popular "suckerfish" [http://www.alistapart.com/articles/dropdowns]). Since in such a case, the menu is usually seated upon an HTML list, and the top-level items must be styled differently from the sub items, the combinator allows us to accomplish this in a snap.

Again, the best way to understand this concept is with a concrete example. The following one implements a basic drop-down in a few easy steps. Here it is:  

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS combinators (child combinator)</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
nav > ul {
    list-style: none;
    width: 524px;
    height: 40px;
    padding: 0;
    margin: 0;
    overflow: visible;
}
nav > ul > li {
    float: left;
    width: 130px;
    height: 40px;
    background: #824100;
    border-right: 1px solid #FFF;
    position: relative;
}
nav ul > li:hover {
    background: #A85400;
}
nav > ul > li > a {
    display: block;
    width: 130px;
    height: 40px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    color: #FFF;
}
nav > ul > li:hover ul {
    display: block;
}
nav > ul > li > ul {
    display: none;
    list-style: none;
    width: 130px;
    padding: 0;
    margin: 0;
    background: #A85400;
    position: absolute;
    top: 38px;
    left: 0;
}
nav > ul > li > ul > li {
    height: 40px;
}
nav > ul > li > ul > li:hover {
    background: #824100;
}
nav > ul > li > ul > li > a {
    display: block;
    width: 130px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    color: #FFF;
}
</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>   
    <nav>  
        <ul>
            <li>
                <a href="#">About Us</a>
                <ul>
                    <li><a href="#">Subitem 1</a></li>   
                    <li><a href="#">Subitem 2</a></li>
                    <li><a href="#">Subitem 3</a></li>
                </ul>       
            </li>
            <li>
                <a href="#">Products</a>
                <ul>
                    <li><a href="#">Subitem 1</a></li>   
                    <li><a href="#">Subitem 2</a></li>
                    <li><a href="#">Subitem 3</a></li>  
                </ul>       
            </li>
            <li>
                <a href="#">Services</a>
                <ul>
                    <li><a href="#">Subitem 1</a></li>   
                    <li><a href="#">Subitem 2</a></li>
                    <li><a href="#">Subitem 3</a></li>  
                </ul>       
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
    <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>

See how easy it is to create a functional suckerfish-like drop-down, thanks to the functionality provided by the child combinator? I bet you do! Of course, in the above example I exaggerated my use of the combinator, so that you can see more clearly how it works. If you launch your browser (even Internet Explorer) and try the example, this is how the menu should look:

That worked quite well indeed. However, the most important detail to point out here is that the CSS code attached to the menu's skeleton makes clever use of the child combinator to differentiate the top items from the ones that belong to each submenu. 

Obviously, there are many other situations where the usage of the child combinator can be really helpful for optimizing CSS snippets, other than when building simple drop-down menus. Nevertheless, this example is pretty helpful for demonstrating how to employ the combinator in a real-world use case.  

Closing Remarks

We've come to the end of this tutorial. But the journey has been instructive, as you learned (or at least I attempted to achieve that from the very beginning) the basic concepts that surround the use of CSS combinators. They won't revolutionize the way you create your CSS code, but they can be great allies when you're trying to optimize your CSS techniques and keep your markup as free as possible of verbose "class" and "id" attributes.

Considering the advantages that they bring to the table, along with the cross-browser support that they enjoy today, there's no better time than now to get your hands on combinators and make them work for you.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials