I recently needed to style some Drupal blocks so that the first one in the series always received top rounded corners. I tested out how combining the adjacent sibling selector with decedent selectors would work. The declaration here acts more like a condition. block-2 is by default the top block in my sidebar.  Only the first block to show gets a rounded corner top.

Here is #block-2 as the first block:

#block-1 as the first block:

#block-2  .block-inner {
border-top-right-radius :6px;
border-top-left-radius     :6px;
}

#block-1 + #block-2 .block-inner {
border-radius :0px;
border-top: 0 none;
}

For more info see: http://reference.sitepoint.com/css/adjacentsiblingselector

Why didn’t I use the :first-child selector instead?

#sidebar-left .block:first-child .block-inner {
border-top-right-radius:6px;
border-top-left-radius:6px;
}

I guess I could have. But the adjacent selector has better browser compatibility. Trust me I think that this code is much more effective because there is no guess work involved here, doesn’t matter what the block ID is:

Besides, it was more fun to see how the adjacent sibling selector can work with a decent selector combination.

Related posts:

1. Using the General Sibling Selector (CSS) The general sibling selector can be very useful in reducing...
2. Why min-width and maximum-width hacks blow up in IE6 There are many hacks for ie6 to get the css...
3. Web Design Resources: March 16th through March 19th My latest delicious bookmarks related to web design, development, drupal,...

My latest delicious bookmarks related to web design, development, drupal, wordpress, seo, freelance, design, typography, css, jquery and the list goes on…

• Comparison of Rotator / Slider modules | drupal.org -
• Ebizon RedFire | drupal.org -
• 24 Stunning Free Drupal Themes! | Top Free Drupal Templates | Blogging Tips -
• * Improve Search Ranking With Google Analytics Advanced Segments : Blogthority -
• Socialite – All your social networks in one application -

Related posts:

1. Web Design Resources: December 17th through December 21st My latest delicious bookmarks related to web design, development, drupal,...
2. Web Design Resources: December 10th through December 15th My latest delicious bookmarks related to web design, development, drupal,...
3. Web Design Resources: March 4th through March 6th My latest delicious bookmarks related to web design, development, drupal,...