【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番目の要素】
| 1 | AAAAA |
| 2 | BBBBB |
| 3 | CCCCC |
<style type="text/css">
/* IEで互換モードの時はダメ */
#tbl1 tr:first-child td { background : #cccccc; }
</style>
【n番目の要素】
| 1 | AAAAA |
| 2 | BBBBB |
| 3 | CCCCC |
<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>