CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

  • あとで読みたい人は…

こんにちは、@cappeeです。

最近はIEのアップデートによりCSS3で追加された疑似クラスも多用するようになってきたので、特にリスト系でよく使うものをいくつかメモしておきたいと思います。

間違いやすい疑似クラスや疑似要素に関してはこちらをご覧ください。
CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

要素の最初に適用する疑似クラス :first-child

:first-child は、ある要素内で最初に書かれている子要素にスタイルが適用されます。
ここでご紹介する疑似クラスの中では唯一CSS2から定義されていて、下記でご紹介する :nth-child(1) と同じ指定になります。

よくある使い方としては、お知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

border02 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
padding: 10px 5px;
border-top:1px solid #CCC;
}
li:first-child{
border-top:none;
}

border04 CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

li {
border-left:1px solid #CCC;
padding-left:6px;
margin-left:6px;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
li:first-child{
border-left:none;
}

:first-child の間違いやすい記述に注意

例えばdivの中に見出しタグとpタグがあった場合、p:first-child と記述して最初のpタグにスタイルを適用したくても、最初の要素はhタグという認識になってしまいます。親要素の中の最初のセレクタはhタグだからです。

<div>
<h2>見出し</h2>
<p>スタイルを適用したいテキスト</p>
<p>スタイルを適用したくないテキスト</p>
</div>

この場合は下記でもご紹介する :nth-child(2) を使うか、兄弟関係にあるp要素の最初に適用する first-of-type か、疑似クラスではなく h2 + p のように隣接セレクタなどで対応する必要があります。

要素の最後に適用する疑似クラス :last-child

:last-child は、ある要素内で最後に書かれている子要素にスタイルが適用されます。
CSS3から定義されていて、下記でご紹介する :nth-last-child(1) と同じ指定になります。

よくある使い方としては、上記の :first-child と同じようにお知らせなど縦並びのリスト系やメニューなどの横並びで区切り線があるようなデザインがあります。

要素を繰り返し適用する疑似クラス :nth-child

奇数の要素に適用する場合

奇数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(odd){
background-color: #EEE;
}
li:nth-child(2n+1) {
background-color: #EEE;
}

偶数の要素に適用する場合

偶数の要素にスタイルを適用する場合は以下の2つの方法があります。

li:nth-child(even){
background-color: #EEE;
}
li:nth-child(2n+2) {
background-color: #EEE;
}

数を指定して繰り返し適用する場合

例えば3つおきに要素を指定する場合は、ユーザー一覧などでよく見るレイアウトにとても便利です。

nth child CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

.leftBox {
width: 200px;
padding: 10px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.leftBox:nth-child(3n+3) {
border-right:none;
}

nth-child(3n+3)とは、3つおきの3番目(最後)にスタイルを適用します。
nth-child(3n+2)は3つおきの2番目(真ん中)、nth-child(3n+1)は3つおきの1番目(最初)です。

最初の要素数個に適用する場合

最初の要素をいくつか指定して適用することもできます。下記では最初の3つを指定した場合です。

li:nth-child(-n+3){
background-color: #EEE;
}

親要素の最後から数える場合

nth-last-child(n) と記述すれば親要素の最後から数えた場合のスタイルが適用できます。nには数字を入れてください。

IEでの対応状況

上記で記述した疑似クラスは基本的にIE8以降からの対応となります。

対応策としては以前ご紹介したように IE9.js を追加すればIE7では問題なく表示されますのでぜひお試しください。

HTML5でコーディングする時に入れる魔法のJS【完全版】

Pocket
article clipper CSSで要素の最初と最後、または繰り返しスタイルを適用する疑似クラス

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)