Home arrow Style Sheets arrow CSS Combinators: Using General Siblings
STYLE SHEETS

CSS Combinators: Using General Siblings


In this second part of a three-part tutorial, I develop a couple of examples which show how easy it is to exploit the functionality provided by the general sibling combinator, and how its usage (even in simple cases) can lead to writing shorter and more efficient CSS snippets.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
January 25, 2012
TABLE OF CONTENTS:
  1. · CSS Combinators: Using General Siblings
  2. · Using the General Sibling Combinator

print this article
SEARCH DEVARTICLES

CSS Combinators: Using General Siblings
(Page 1 of 2 )

As one of the most underrated facilities of the CSS specification, combinators are powerful tools that allow you to improve the assignment of styles to elements on a web page. While their functionality remained “forgotten” in a dark corner for many years, due to the lack of a proper support by some browser vendors (with Internet Explorer clearly leading the crowd), things have changed for good. Now it’s possible to utilize them in a pretty cross-browser fashion.

The best way to demonstrate how useful combinators can be is through some concrete, functional code samples. In keeping with this requirement, in the previous part of this tutorial I created several. They showed how to use the adjacent sibling combinator (+) to define the visual presentation of a simple paragraph, first when it was an adjacent sibling of another paragraph, and then when playing the same role with an H2 element. In both cases, styling the paragraph was a breeze. Best of all, I didn't have to use additional classes or “ids.” 
   
As I noted in the first part, there are a few other CSS combinators whose functionality deserves a close analysis as well, such as the general sibling combinator (~) and the child combinator (>). To keep things clear and understandable, in the lines to come I’ll be explaining how to utilize the former, so that you can grasp its driving logic and quickly put it to work for you.

Using the General Sibling Combinator to Styling Paragraphs

As its name suggests, the general sibling combinator (~) comes in handy for styling all the web page elements that are…yes, siblings of a given one. Even though it's not as useful as its counterpart, adjacent sibling, this combinator will permit you to accomplish the entire styling process without polluting your markup with extra “ids” or classes as well.

Would you like to see a concise example of how to put this combinator in action? Take a look at the following code fragment, which makes use of it to define the visual presentation of all the paragraphs that are siblings of an H2 header. Check it out:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS combinators (general 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 h2 ~ p {
    color : #A43500;
    background: #FFF7F2;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Using CSS combinators (general 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>   
        <div id="container">
            <h2>Content 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.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>
            <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>

Definitely, the structure of the above web page and the CSS fragment that polishes the appearance of the sample paragraphs are pretty easy to follow. As you can see, in this case, the usage of the pertinent combinator is somewhat pointless, as the same result could be achieved by targeting the paragraphs with the following expression:

#container p {
    color : #A43500;
    background: #FFF7F2;
}

Despite this, the example shows the actual functionality of the general sibling combinator and how to use it in a concrete case. Moreover, if you want to see the output that the previous web page produces, the image below will show you:   

As one might expect, all the paragraphs that are siblings of the target H2 element have been neatly styled. As I explained before, though, it’d be pretty educational to create a final example that shows how to use the corresponding combinator with a web page that defines a more complex structure. This way, you'll see how it can save you from creating additional classes or coding longer declarations.

This example will be built in the next section, so click on the link below and keep reading.


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