【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>