Home arrow Style Sheets arrow Page 2 - 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 - Using Adjacent Sibling Combinator with an H2 Element and a Paragraph
(Page 2 of 2 )

As I just said in the preceding section, Iíd like to provide you with another example that shows you quite clearly how to use the adjacent sibling combinatory in a different situation. I've defined a brand new web page, which uses the combinator to style a paragraph which is a sibling of an H2 header. The page in question looks like this:

<!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 h2 + 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">
        <h2>Adjacent Sibling Combinator</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>
    </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>

From the above example, itís clear to see how useful the adjacent sibling combinator can be for  targeting an HTML element without using an additional CSS class or selector. In this case, the combinator has been used to decorate the aforementioned paragraph with a few basic styles. This yields the following output when rendered on screen:

There you have it. Even though the code samples that you've seen so far were pretty contrived, hopefully they provided you with the right foundation to start employing the adjacent sibling combinator when building your own web pages. Be bold and give it a try right now! You wonít regret it, believe me.

Final Thoughts

In this first part of a three-part tutorial, I provided you with a quick overview of what CSS combinators are and how to use them to improve the overall efficiency and robustness of your CSS code. As you saw before, this roundup started by showcasing the usage of the adjacent sibling combinator, which is a breeze to grasp.

Nevertheless, there are a few other combinators that deserve an in-depth look as well, including the general sibling combinator (~) and the child combinator (>). But, donít be concerned, as these will be covered in detail in the tutorialís forthcoming chapters.

Donít miss the next 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