Home arrow Style Sheets arrow Page 2 - 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 - Using the General Sibling Combinator
(Page 2 of 2 )

One typical case where the general sibling combinator really shines is when itís necessary to style elements that have a deeper level of nesting. In the example you saw in the preceding segment, the combinator could have been easily replaced with the descendant selector (yes, the white space character that youíve probably worked with thousands of times before). But the usage of the combinator in more complex hierarchies can help you target only a set of descendant elements, instead of the entire batch.

To understand this concept more clearly, I suggest you look at this brand new code sample below. It demonstrates how to style only the pair of paragraphs that are siblings of an H2 element. Here it is:      

<!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>
            <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>
            </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>

As you can see above, this time the target H2 header has only two sibling paragraphs, as the third one has been wrapped inside an additional div. In a common situation, itíd be somewhat difficult to style the siblings without affecting this third element, right? Well, thanks to the use of the corresponding combinator, itís possible to achieve this with a single, short declaration. The result of this process is shown in the following screen capture: 

Admittedly, this example is rather contrived and primitive; regardless, it demonstrates the functionality provided by the general sibling combinator. So, now that you understand the logic behind it, stay one step ahead of the crowd and start using it when styling your own web pages!

Closing Thoughts

In this second part of a three-part tutorial, I developed a couple of approachable examples to 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.

However, this humble journey through CSS combinators hasnít finished yet. I plan to cover one last one: the child combinator (>).

Don't miss the last part!


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