【id指定】

<style type="text/css">
#text11 { color : blue ;}
</style>

【class指定】

<style type="text/css">
.green { color : green ;}
</style>

【属性指定】


<style type="text/css">
[name=text21]   { background : #99ff99; }        /* 一致*/
[name^="text2"] { font-size:14px; }              /* 前方一致 */
[name*="ext2"]  { text-decoration : underline; } /* 部分一致 */
[name$="22"]    { color : red; }                 /* 後方一致 */
</style>

【隣接する要素】

<style type="text/css">
#check11+label { color : #0000ff;}
/* ~を指定すると後ろにある要素
#check11~label { color : #0000ff;}
*/
</style>

【checkされているもの】




<style type="text/css">
/* CSS3対応のブラウザのみ可 */
input[name=radio01]:checked+label { background : red; }
</style>

【1番目の要素】

1AAAAA
2BBBBB
3CCCCC
<style type="text/css">
/* IEで互換モードの時はダメ */
#tbl1 tr:first-child td { background : #cccccc; }
</style>

【n番目の要素】

1AAAAA
2BBBBB
3CCCCC
<style type="text/css">
/* CSS3対応のブラウザのみ */
#tbl2 tr:nth-child(odd)  td { background : #99ff99; } /* 奇数番目の要素 */
#tbl2 tr:nth-child(even) td { background : #ff9999; } /* 偶数番目の要素 */
</style>

/* JQueryでやる場合(CSS3対応でないブラウザでもOK) */
<style type="text/css">
.odd  { background : #99ff99; }
.even { background : #ff9999; }
</style>
<script type="text/javascript">
$(document).ready( function(){
		$("#tbl2 tr:odd").addClass("odd");
		$("#tbl2 tr:even").addClass("even");
});
</script>