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.
The general sibling selector can be very useful in reducing css code in your style sheets and in your html.
You have a thumbnail image to the left of a few paragraphs and you don’t want them to wrap below the image.
Instead of using a wrapper div for your paragraphs, you can simple use one declaration:
img ~ p {padding-left:122px;}
This means that all general siblings of an img element will have a left padding value of 122px.
See: http://reference.sitepoint.com/css/generalsiblingselector
In my case, I was not planning on having more than 298 elements, seems excessive. In that case you would want to use a wrapper div for those paragraphs. As for IE6, I say let the text wrap!
With CSS3, you can create a border that fades out gradually using the :before and :after css pseudo classes and css gradients.
I haven’t seen this technique done anywhere so I decided to post it. It was inspired by the Multiple Borders technique posted by Jeffery Way you can actually do a lot using the before and after pseudo classes, adding elements to one element that is not considered part of the html structure or the document flow(if positioned absolutely).