CSSセレクタの種類まとめ

2016.03.21

HTML・CSS

まとめ

CSSセレクタについて色々調べてみたのでメモ。

子セレクタ

HTML

<div class="sample01">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
</div>

CSS

.sample01 > h1 {
	color: red;
}

.sample01の子要素のh1の文字が赤色になりました。
子セレクタのデモページ

A > B	Aの直下にある子要素のBを指定。 IE7からの対応。

隣接セレクタ

HTML

<div class="sample02">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
</div>

CSS

h2 + p {
	color: red;
}

h2の次のpの文字が赤色になりました。
隣接セレクタのデモページ

A + B	Aの直後にある兄弟要素のBを指定。 IE7からの対応。

間接セレクタ

HTML

<div class="sample03">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
</div>

CSS

h2 ~ p {
	color: red;
}

h2以降のpの文字が赤色になりました。
間接セレクタのデモページ

A ~ B	A以降にある兄弟要素のBを指定。 IE7からの対応。

属性セレクタ

HTML

<ul class="sample04">
	<li id="sample">#sample</li>
	<li class="sample">.sample</li>
	<li><a href="https://www.google.co.jp/">httpsから始まるリンク</a></li>
	<li><a href="image.jpg">jpg画像へのリンク</a></li>
	<li><a href="https://cly7796.net/blog/">cly7796へのリンク</a></li>
</ul>

CSS

li[id] {
	color: red;
}
li[class="sample"] {
	color: blue;
}
a[href^="https"] {
	color: orange;
}
a[href$=".jpg"] {
	color: green;
}
a[href*="cly7796"] {
	color: purple;
}

属性セレクタのデモページ

A[attr]	属性名attrを持つAを指定。 IE7からの対応。
A[attr=”val”]	属性名attrの値がvalのAを指定。 IE7からの対応。
A[attr^=”val”]	属性名attrの値がvalから始まるAを指定。 IE7からの対応。
A[attr$=”val”]	属性名attrの値がvalで終わるAを指定。 IE7からの対応。
A[attr*=”val”]	属性名attrの値がvalを含むAを指定。 IE7からの対応。

疑似クラス(順番系)

HTML

<div class="sample05">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample05 h1:first-child {
	color: red;
}
.sample05 p:first-child {
	color: blue;
}
.sample05 p:last-child {
	color: green;
}
.sample05 p:nth-child(3) {
	color: orange;
}

first-childやlast-child、nth-childは子要素全ての中からn番目の要素を指定します。
上記サンプル4行目のp:first-childは最初の要素がpではないため、スタイルは適用されません。
first-child・last-child・nth-childのデモページ

A:first-child	特定要素内の最初の子要素がAの場合に指定。最初の子要素がAでない場合は適用されない。 IE7からの対応。
A:last-child	特定要素内の最後の子要素がAの場合に指定。最後の子要素がAでない場合は適用されない。 IE9からの対応。
A:nth-child(n)	特定要素内のn番目の子要素がAの場合に指定。 n番目の子要素がAでない場合は適用されない。 nは数値、2nや4n+1のような計算式、oddやevenなどの偶数奇数の指定ができる。 IE9からの対応。

nth-childは以下のようにnを使った数式にすることもできます。

HTML

<div class="sample06">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample06 p:nth-child(2n+1) {
	color: red;
}

1番目の要素はh1のため、1番目以外の奇数番目のpの文字が赤色になります。
nth-childのデモページ
　

nth-childを後ろから数えたい場合、nth-last-childを使います。

HTML

<div class="sample07">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample07 p:nth-last-child(2n+1) {
	color: red;
}

後ろから3番目の要素はh2のため、それ以外の後ろから数えた奇数番目のpの文字が赤色になります。
nth-last-childのデモページ

A:nth-last-child(n)	特定要素内の後ろからn番目の子要素がAの場合に指定。後ろからn番目の子要素がAでない場合は適用されない。 nは数値、2nや4n+1のような計算式、oddやevenなどの偶数奇数の指定ができる。 IE9からの対応。

前述のfirst-childなどと違い、子要素全てではなく指定した要素全ての中からn番目の要素を指定したい場合、first-of-typeやlast-of-type、nth-of-typeなどを使用します。

HTML

<div class="sample08">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample08 h1:first-of-type {
	color: red;
}
.sample08 p:first-of-type {
	color: blue;
}
.sample08 p:last-of-type {
	color: green;
}
.sample08 p:nth-of-type(3) {
	color: orange;
}

first-of-type・last-of-type・nth-of-typeのデモページ

A:first-of-type	特定要素内の最初のA要素を指定。 IE9からの対応。
A:last-of-type	特定要素内の最後のA要素を指定。 IE9からの対応。
A:nth-of-type(n)	特定要素内のn番目のA要素を指定。 IE9からの対応。

nth-of-typeはnth-childと同じように、nを使った数式にすることができます。

HTML

<div class="sample09">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample09 p:nth-of-type(2n+1) {
	color: red;
}

pの中から奇数番目の文字が赤色になります。
nth-of-typeのデモページ
　

nth-of-typeを後ろから数えたい場合、nth-last-of-typeを使います。

HTML

<div class="sample10">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample10 p:nth-last-of-type(2n+1) {
	color: red;
}

pの中から後ろから数えた奇数番目の文字が赤色になります。
nth-last-of-typeのデモページ

A:nth-last-of-type(n)	特定要素内の後ろからn番目のA要素を指定。 IE9からの対応。

疑似クラス(only-child・only-of-type)

HTML

<div class="sample11">
	<h1>h1タイトル</h1>
	<p>テキストテキスト<span>テキスト</span></p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト<span>テキスト</span>テキストテキスト<span>テキスト</span></p>
</div>

CSS

.sample11 span:only-child {
	color: red;
}
.sample11 h1:only-of-type {
	color: blue;
}

only-child・only-of-typeのデモページ

A:only-child	特定要素内の子要素がAのみの場合に指定。 IE9からの対応。
A:only-of-type	特定要素内のAが1つしかない場合に指定。 IE9からの対応。

疑似クラス(empty)

HTML

<div class="sample12">
	<div>てすと</div>
	<div></div>
	<div>てすと</div>
	<div><span></span></div>
</div>

CSS

.sample12 div:empty {
	height:10px;
	background: red;
}

emptyのデモページ

A:empty	A要素内が空の場合に指定。 IE9からの対応。

疑似クラス(not)

HTML

<div class="sample13">
	<h1>h1タイトル</h1>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample13 p:not(:last-child) {
	color: red;
}

notのデモページ

A:not(B)	Bに当てはまらないAを指定。 IE9からの対応。

疑似クラス(UI系)

HTML

<div class="sample14">
	<input type="text" />
	<input type="text" disabled />
	<button>ボタン</button>
	<button disabled>ボタン</button>
	<input type="checkbox" id="check" />
	<label for="check">チェックボックス</label>
</div>

CSS

input:enabled {
	background: red;
}
input:disabled {
	background: blue;
}
button:enabled {
	background: green;
}
button:disabled {
	background: purple;
}
input:checked + label {
	color: orange;
}

enabled・disabled・checkedのデモページ

A:enabled	UIが有効になっているAを指定。 IE9からの対応。
A:disabled	UIが無効になっているAを指定。 IE9からの対応。
A:checked	チェックされているAを指定。 IE9からの対応。

疑似クラス(target)

HTML

<div class="sample15">
	<a href="#tab01">タブ1</a>
	<a href="#tab02">タブ2</a>
	<div id="tab01" class="tab-contents">タブ1の内容</div>
	<div id="tab02" class="tab-contents">タブ2の内容</div>
</div>

CSS

.tab-contents {
	display: none;
}
.tab-contents:target {
	display: block;
}

targetのデモページ

A:target	アンカーリンクでターゲットになったAを指定。 IE9からの対応。

疑似要素

HTML

<div class="sample16">
	<h1>h1タイトル</h1>
	<p>テキストテキスト<br />テキストテキスト</p>
	<p>テキストテキスト
	テキストテキスト</p>
	<h2>h2タイトル</h2>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキスト</p>
</div>

CSS

.sample16 h1::before {
	content: 'before';
}
.sample16 h1::after {
	content: 'after';
}
.sample16 h2::first-letter {
	color: red;
}
.sample16 p::first-line {
	color: blue;
}

疑似要素のデモページ

A::before(A:before)	Aの前に指定した内容を挿入。 IE9からの対応。(A:beforeの場合はIE8から対応。)
A::after(A:after)	Aの後に指定した内容を挿入。 IE9からの対応。(A:afterの場合はIE9から対応。)
A::first-letter(A:first-letter)	Aの1文字目にスタイルを適用。 IE9からの対応。(A:first-letterの場合はIE6から対応。)
A::first-line(A:first-line)	Aの1行目にスタイルを適用。 IE9からの対応。(A:first-lineの場合はIE6から対応。)

【参考サイト】

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

CSSセレクタの種類まとめ

子セレクタ

HTML

CSS

隣接セレクタ

HTML

CSS

間接セレクタ

HTML

CSS

属性セレクタ

HTML

CSS

疑似クラス(順番系)

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

疑似クラス(only-child・only-of-type)

HTML

CSS

疑似クラス(empty)

HTML

CSS

疑似クラス(not)

HTML

CSS

疑似クラス(UI系)

HTML

CSS

疑似クラス(target)

HTML

CSS

疑似要素

HTML

CSS

関連記事

npmで個人的に使いそうなコマンドまとめ

new Date()の使い方

SVGの記述方法まとめ

:nth-childの使い方

font-familyの指定方法

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル