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から対応。)

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31