疑似クラスや疑似要素で作業効率をアップさせる(1)

擬似クラスでよく使われるのは、リンクがマウスオーバーされた時に適用する「hover」等だと思います。
CSS3になってからは、新しくいくつもの疑似クラスが追加されています。IEでは未対応のものもありますが、使いようでは、余計なidやclassの記述を減らすことで、ソースのクリーンナップや作業効率をアップできるのではないでしょうか?

背景色がシマシマのテーブル

表を行ごとに背景色を付けたい場合、従来のように行ごとにclassを指定するとソースも汚くなってしまうので、疑似クラスを適用することでHTMLソースもスッキリします。

<table>
<tr><td>1行目</td></tr>
<tr><td>2行目</td></tr>
<tr><td>3行目</td></tr>
<tr><td>4行目</td></tr>
<tr><td>5行目</td></tr>
</table>
tr:nth-child(odd){
background:#FFC;
}
tr:nth-child(even){
background:#FC9;
}

nth-child(even)・・・偶数行
nth-child(odd)・・・奇数行

14080801

一番下の行だけ下線を消したい

<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
<li>4行目</li>
<li>5行目</li>
</ul>
li{
border-bottom:dotted 1px #ccc;
padding:5px;
margin:5px;
}
li:last-child{
border-bottom:none;
}

last-child・・・最後の要素
first-child・・・最後の要素(CSS2で定義)

14080802

一覧へ戻る