奇数・偶数の指定や最初・最後の要素を指定できるCSS3セレクタ

  • : CSS
  • :

CSS3(Lv3)はIE8以下は対応していませんが、selectivizr.jsを利用する事で一部のセレクタをIE6~8でも対応する事もできます。


E:nth-child(n) / 擬似クラス / Lv3

親要素の n 番目の子要素である E 要素にスタイルを適用

<style type="text/css">
#exp1 div:nth-child(even) {background-color:yellow;}
</style>
<div id="exp1">
<div>Division1</div>
<div>Division2</div>
<div>Division3</div>
<div>Division4</div>
</div>

結果

Division1
Division2
Division3
Division4
メニューに戻る

E:nth-last-child(n) / Lv3

親要素の 最後から数えてn番目の子要素である E 要素にスタイルを適用

<style type="text/css">
#exp2 div:nth-last-child(3) {background-color:yellow;}
</style>
<div id="exp2">
<div>Division1</div>
<div>Division2</div>
<div>Division3</div>
<div>Division4</div>
</div>

結果

Division1
Division2
Division3
Division4
メニューに戻る

E:nth-of-type(n) / Lv3

兄弟関係にある n 番目の E 要素にスタイルを適用

<style type="text/css">
#exp3 div:nth-of-type(2) {background-color:yellow;}
</style>
<div id="exp3">
<div>Division1</div>
<div>Division2</div>
<div>Division3</div>
<div>Division4</div>
</div>

結果

Division1
Division2
Division3
Division4
メニューに戻る

E:nth-last-of-type(n) / Lv3

兄弟関係にある n 番目の E 要素にスタイルを適用

<style type="text/css">
#exp4 div:nth-last-of-type(2) {background-color:yellow;}
</style>
<div id="exp4">
<div>Division1</div>
<div>Division2</div>
<div>Division3</div>
<div>Division4</div>
</div>

結果

Division1
Division2
Division3
Division4
メニューに戻る

(n)で使える値の一例

4 設定した数字この場合4番目の要素に適用
even 偶数番目の要素に適用<
odd 奇数番目の要素に適用
2n 2の倍数番目の要素に適用
3n 3の倍数番目の要素に適用
メニューに戻る

E:first-child / Lv2

親要素の最初の子要素である E 要素にスタイルを適用

<style type="text/css">
#exp5 div:first-child{background-color:yellow;}
</style>
<div id="exp5">
<div>Division1</div>
<div>Division2</div>
<div>Division3</div>
</div>

結果

Division1
Division2
Division3
メニューに戻る

E::first-line / Lv1

E要素の最初の 1行にスタイルを適用

<style type="text/css">
#exp7 p:first-line {color:red;}
</style>
<div id="exp7" class="pb00">
<p>E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用</p>
</div>

結果

E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用 E要素の最初の 1行にスタイルを適用

メニューに戻る

E::first-letter / Lv1

<style type="text/css">
#exp8 p::first-letter {
font-weight:bold;
font-size:24px;
color:red;
}
</style>
<div id="exp8">
<p>テキスト</p>
</div>

結果

テキスト

メニューに戻る

E[foo^=”bar”] / Lv3

barという値から始まるfoo属性を持つE要素に対してスタイルを適用

<style type="text/css">
#exp9 a[target^="_blank"] {
font-weight:bold;
font-size:24px;
color:red;
}
</style>
<div id="exp9" class="pb00 ex_box">
<a href="" target="_blank">外部リンク</a>
<a href="">内部リンク</a>
</div>

結果

メニューに戻る

E[foo$=”bar”] / Lv3

barという値で終わるfoo属性を持つE要素に対してスタイルを適用

<style type="text/css">
#exp10 a[href$="pdf"] {
font-weight:bold;
font-size:24px;
color:red;
}
</style>
<div id="exp10" class="ex_box">
<a href="xx.pdf">pdfへリンク</a>
<a href="">リンク</a>
</div>

結果

メニューに戻る
W3c – Selectors Level 3
http://www.w3.org/TR/css3-selectors/#selectors
selectivizr.js
selectivizr
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

two + 5 =