Home arrow Style Sheets arrow Intro to CSS Combinators
STYLE SHEETS

Intro to CSS Combinators


In this first part of a three-part tutorial, you'll get a quick overview of what CSS combinators are and how to use them to improve the overall efficiency and robustness of your CSS code.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
January 19, 2012
TABLE OF CONTENTS:
  1. · Intro to CSS Combinators
  2. · Using Adjacent Sibling Combinator with an H2 Element and a Paragraph

print this article
SEARCH DEVARTICLES

Intro to CSS Combinators
(Page 1 of 2 )

Combinators are quite possibly one of the most underrated features of CSS. However, the indifferent attitude with which programmers treat them wasn’t because of their useless nature or limited functionality. In fact, as with many other “forgotten” facilities provided by the specification, many browser vendors included "support" for combinators that was buggy, poor, and in the worse case, simply non-existent.

Despite  this, today there’s new hope for getting combinators up and running, as most browsers (yes, even Internet Explorer 7 and up) allow you to use them in a pretty confident and consistent fashion. Of course, if you’re anything like me, you’ll be wondering what the point is in using them, since you can craft your CSS code from top to bottom without knowing what they do or even how they’re named. Who cares, after all?

Well, let me answer the previous question with a single word: efficiency. Even though the concept may sound a bit old-fashioned, combinators are a powerful feature that will permit you to improve the quality of both your CSS snippets and your markup. Furthermore, they’ll help you define the visual presentation of your web pages with a smaller number of classes and “ids,” while keeping the whole structure cleaner and uncluttered. Not a bad deal, right?

If this topic has caught your attention, keep reading. In this tutorial, I’ll be taking a closer look at the most popular combinators bundled with CSS, including the adjacent sibling (+) , general sibling (~) and child combinator (>). This way, you can start taking advantage of their functionality in no time.

Now, leave the preliminaries behind and read the lines to come!

Getting Started: Setting up an Introductory Example

The first CSS combinator that I plan to cover is the one called “adjacent sibling.” It is represented by the plus sign (+). This combinator lets you target the last element of two that are… yes, adjacent siblings within an HTML document.

Naturally, the best way to understand the logic of this combinator is by example. Below I coded an easy one; it uses the combinator to assign a batch of styles to the last paragraph of a couple of adjacent elements. Check it out:  

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS combinators (adjacent sibling 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 + p {
    color : #A43500;
    background: #FFF7F2;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Using CSS combinators (adjacent sibling 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 id="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>
            <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>
    </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 previous web page is pretty basic, it demonstrates how to use the adjacent sibling combinator. In this case, I used it to style the last paragraph of the two wrapped inside the div identified as “container,” a process that allowed me to perform this task without appealing to additional “class” or “id” attributes.

If you wish to see the output that the example produces, take a look at the following screen shot, which hopefully will make things much clearer to you.

If you ever though that learning how to use CSS combinators was a waste of time, the above image should make you change your mind quickly. Not only are combinators powerful tools that will improve the overall efficiency of your styling techniques, but they’ll be interpreted correctly by most major browsers, including Internet Explorer. Have you ever imagined such a pleasant surprise?

So far, so good. At this point, I’m pretty sure that you've already grasped the underling logic of the adjacent sibling combinator. But, if you still have some doubts in regard to its functionality, in the next section I’ll be creating an additional example. It will show you how to use it to style a sibling paragraph adjacent to an H2 element.


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