Build a social box using CSS adjacent sibling selectors

Have you ever found yourself in a small problem where you have a box with some elements that were floating? But let’s say that the third or the second element had to do something else like: not to float or to have border, and you couldn’t change the class name? How can you do that from CSS but not changing the class name?
Well I know I did encounter this problem many times. So what I want to do in this tutorial is to build a box with other small boxes in it but the last box will have some different style.

Here is a demo page of the box that I will create.

I will use the adjacent sibling selecotrs.

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

First the HTML:

<div id="wrapper">
 <div class="social_box">
  <div class="social_footer">
  <h4>connect with us</h4>
  <div class="social"><a href="#"><img src="icon_facebook.jpg" alt="" border="0" />Join us on Facebook</a></div>
  <div class="social"><a href="#"><img src="icon_youtube.jpg" alt="" border="0" />Subscribe to our YouTube channel</a></div>
  <div class="social"><a href="#"><img src="icon_twitter.jpg" alt="" border="0" />Follow us on Twitter</a></div>
  <div class="social"><a href="#"><img src="icon_linkedin.jpg" alt="" border="0" />Connect with us on Linked In</a></div>
  <div class="social"><a href="#"><img src="icon_rss.jpg" alt="" border="0" /><span>Subscribe to our RSS feed</span></a></div>
 </div>
 </div>
</div>

I created a box that has 5 children. Each box has an small image and some text. The #wrapper just put’s the box on the middle of the page.
There is nothing special about this HTML code just some div's.

Secondly the CSS:

#wrapper {
 font-family:Verdana, sans-serif;
 clear:both;
 width:500px;
 margin:0 auto;
}
.social_box {
 width:290px;
 background:#636260;
 padding:15px 22px;
}
.social_box h4 {
 color:#fff;
 font-family:Verdana, sans-serif;
 padding:0;
 margin:0;
 font-style:normal;
 margin-bottom:15px;
 letter-spacing:-0.04em;
}
.social_box .social {
 float:left;
 font-size:12px;
 color:#fff;
 width:145px;
 margin-bottom:9px;
 line-height:12px;
}
.social_box .social + .social + .social + .social + .social {
 float:none;
 width:100%;
 clear:both;
 border-top:1px solid #737270;
 padding-top:9px;
}
.social_box .social + .social + .social + .social + .social span {
 margin-top:5px;
 display:inline-block;
}
.social_box .social a {
 color:#4aacff;
 text-decoration:none;
 text-shadow:1px 1px 1px #000;
}
.social_box .social a img {
 float:left;
 margin-right:5px;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border:1px solid #403f3e;
 box-shadow:1px 1px 1px #494949;
}

I will skip the part where I styled the box the background, links etc. I’ll just go to the important part.

I want to talk about the adjacent sibling selectors. So where exactly applies? From my tutorial this property applies on my fifth box. You probably see that all 5 boxes have the same class social. But I need that my last box not to float plus to have a particular style.

You’ll probably say that you can do that from CSS using :last-child or :nth-child(N). Yes of course you can use them as well they will work just fine.
Here comes the “but”. But what if you need that the third element until the last one to have a particular style?

For example the last two boxes they need a border-top you can’t use :last-child even if you use the :nth-child(N) you will have to write down two selectors. So I consider that this is the best CSS selector that can do this.

The adjacent sibling selectors code:

.social_box .social + .social + .social + .social + .social {
 float:none;
 width:100%;
 clear:both;
 border-top:1px solid #737270;
 padding-top:9px;
}
.social_box .social + .social + .social + .social + .social span {
 margin-top:5px;
 display:inline-block;
}

I have the social class. And social_box it’s the parent so using adjacent-sibling-selectors I went to the last child. If you count them there are five .social clases. And on the last one I have a particular style.

There is a down side for this. If there is an other element between your boxes the adjacent-sibling-selectors will stop working.

For example if you have:

<div class="box_parent">  
 <div class="children"</div>
 <div class="children"</div>
 <span>this part will brake the adjacent-sibling-selectors</span>
 <div class="children"</div>
</div>
</div></div></div>
.box_parent .children + .children + .children {}

The above code it will not work because the CSS can’t find the third children so it will stop. This is the down side when using CSS adjacent sibling selectors.

Compatibility:

Firefox
Safari
Chrome
Opera
IE7 IE8 IE9

Here is the standalone example

One thought on “Build a social box using CSS adjacent sibling selectors

  1. I am extremely impressed with your writing skills as well as with the layout on your weblog.
    Is this a paid theme or did you modify it yourself? Anyway keep
    up the excellent quality writing, it’s rare to see a great blog like this one today.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.