CSS3 擬似クラスセレクタ

擬似クラスセレクタでは、「最初の要素」「最後の要素」といった条件によって、自動的に対象の要素を選ぶことができる。

・主な擬似クラスセレクタ(要素名 スタイルが適用される要素)

:first-child 親要素の最初の子要素となる要素
:last-child 親要素の最後の子要素となる要素
:nth-child(n) 親要素のn番目の子要素となる要素
:nth-child(odd) 親要素の奇数番目の要素となる要素
:nth-child(even) 親要素の偶数番目の要素となる要素
:first-of-type 親要素の子要素として最初に出現する要素
:last-of-type 親要素の子要素として最後に出現する要素
:nth-of-type 親要素の子要素としてn番目に出現する要素

例 最後のli要素のmargin-bottomを0にしたい場合

・クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li.last {
    margin-bottom:0;
}

・擬似クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li:last-child{
    margin-bottom:0;
}

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

コメントを残す