Hi,

The Better Semantics with CSS Combinators & Selectors by Chris Sealey article on Design Festival talks about using
Code:
h1 + p::first-line {     font-variant: small-caps;     }
and
Code:
#page > * { width: 100%; }
and
Code:
a[href$=".pdf"]::before {     background-image: url(images/icon-pdf.png);     }
and
Code:
<ul>
<li>List Item 1</li>     
<li>List Item 2</li>     
<li>List Item 3</li>     
<li>List Item 4</li>     
<li>List Item 5</li>    
 <li>List Item 6</li> 
</ul> 
ul li { border-top: 1px solid #DDD; } 
ul li:last-child { border-bottom: 1px solid #DDD; } 
ul li:nth-child(even) { background: #EEE; }
Now Optimize browser rendering by google recommends against all of these css methods.

To be fair the author does say use these in limited situations and as a form of progressive enhancment. Also I am not critisizing the article as it is well written, but even the comments at the end of this blog post don't clear up making an educated decision about the tradeoff.

Using these techniques:

  1. create cleaner css
  2. less css
  3. possibly more semantic

However the big trade off (google's article) is performance.

So are the performance degradations too high to consider using these techniques, or in your opions are more specific ways selecting elements better?

Regards,
Steve