CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

最近使う機会も増えてきたCSS3のセレクタですが、結構ややこしくて困りますよね(確定)。
そんなわけで良く使う属性セレクタとnth-child、nth-of-typeをざっくりとまとめてみました。
これでCSS3や、jQueryを書くときにも困らないかも知れませんね!

※画像の意味はお察しください。

属性セレクタについて

CSS3からタグに付いている属性で条件指定することが出来るようになりました。
基本的にfoo[prop="~"]のように [ と ] で属性の状態を指定します。
また“(ダブルクォーテーション)は必須です!

例えば

/*titleがokの要素*/
*[title="ok"]{
	color:#F00;
}

などです。また属性セレクタは非常に柔軟な指定が可能で

/*titleがokで始まる要素*/
*[title^="ok"]{
	color:#F00;
}

※<p title=”ok1″>,<p title=”ok2″>は適用され、
<p title=”notok”>は適用されません。

/*titleにokを含む要素*/
*[title*="ok"]{
	color:#F00;
}

※<p title=”ok1″>,<p title=”ok2″>,<p title=”notok”>は全て適用されます。

などなど。

属性セレクタでの指定方法をまとめてみたらこんな感じになります。

/*title属性がある場合*/
.testProp[title]{
	font-weight:bold;
}
/*testと一致する場合*/
.testProp[title="test"]{
	letter-spacing:10px;
}
/*testで始まる場合*/
.testProp[title^="test"]{
	padding:10px;
}
/*testで終了する場合*/
.testProp[title$="test"]{
	color:#F00;
}
/*testを含む場合*/
.testProp[title*="test"]{
	border:1px solid #CCC;
}
<!--全部適用されるはず-->
<p class="testProp" title="test">属性セレクタすっごく便利です!</p>

▼実際のサンプル

属性セレクタすっごく便利です!

実際に指定するとこんな感じになります!
プロパティは何でも指定することができるのでかなり汎用性が高いセレクタです。
昔(~CSS2)にもあって欲しかった・・・っ!

nth-child(n)、nth-of-type(n) の違い

子要素のn番目にあたる要素に適用されます。
nth-childとnth-of-typeの違いは

・nth-childは子要素が何であってもカウントされます。
例:

<dl>
	<dt>サンプル</dt>
	<dd>テキスト1</dd>
	<dd>テキスト2</dd>
</dl>

上記のhtmlの場合、「テキスト2」にスタイルを適用しようとした場合、
セレクタは
dd:nth-child(3) となります。
※つまり上記のサンプルの場合、dtもカウントされる対象です

・nth-of-typeは指定したタグのみカウントされます。
例:

<dl>
	<dt>サンプル</dt>
	<dd>テキスト1</dd>
	<dd>テキスト2</dd>
</dl>

上記のhtmlの場合、「テキスト2」にスタイルを適用しようとした場合、
セレクタは
dd:nth-of-type(2) となります。
※こっちのほうが個人的にはわかりやすいです。

こちらもまとめてみました。

/*同じ箇所に別々に指定*/
.testNTH dd:nth-child(3){
	color:#F00;
}
.testNTH dd:nth-of-type(2){
	text-decoration:underline;
}
<!--2個目のddにスタイルが適用されるはず-->
<dl class="testNTH">
	<dt>サンプル</dt>
	<dd>テキスト1</dd>
	<dd>テキスト2</dd>
</dl>

▼実際のサンプル

サンプル
テキスト1
テキスト2

如何でしょうか。
他にもCSS3で追加されたセレクタは色々ありますが
とりあえずこの3つを覚えるだけで大抵の事は出来るんじゃないかな!と思います。

Subscribe:
pagetop