【CSS】疑似クラス
疑似クラスとは
疑似クラスとは、セレクターに付与することで要素の状態や、特定の条件の要素を指定してスタイルを適用すためのものです。
セレクター:疑似クラスのように指定します。
状態の指定
active
<a>や<button>でクリックされた状態のスタイルを表します。
button:active {
color: red;
}checked, default
<input type="radio">、<input type="checkbox">、<select>に対する状態を表します。
checkedは選択状態を表します。
defaultは初期の選択状態を表します。
radio、checkboxはchecked属性、<select>はselected属性が設定された要素を表します。
input:checked + label {
color :red !important;
}
input:default + label {
color: blue
}
option:checked {
background: red !important;
}
option:default {
background: blue;
}empty
要素が空の状態を表します。
<p>abcde</p>
<p></p>p {
background: red;
}
p:empty {
background: blue;
}enabled, disabled
<input>などdisabled属性が設定できる要素に対して、使用可（enabled）、使用不可（disabled）の状態を表します。
input:enabled {
border-color: blue;
}
input:disabled {
border-color: red;
}focus, focus-within
<input>などの要素にフォーカスした状態を表します。
focusは要素そのものを、focus-withinはフォーカスの要素をもつ要素を表します。
<div class="form">
<input type="text"><br>
<input type="text">
</div>.form:focus-within {
background: yellow;
}
.form > input {
border-color: red;
}hover
要素がホバーされた状態を表します。
.elm:hover {
background: red;
}in-range, out-of-range
<input type="number">や<input type="range">のように、min、max属性によって値の範囲が指定できる要素に対して、
範囲内（in-range）と範囲外（out-of-range）を表します。
<input type="number" min="0" max="100">input[type="number"]:in-range {
border-color: green;
}
input[type="number"]:out-of-range {
border-color: red;
}required, optional
<input>などの要素に対し、入力必須である（required）か入力必須でない（optional）かの状態を表します。
入力必須はrequired属性を指定することで設定できます。
<input type="text" required><br>
<input type="text">input[type="text"]:required {
border-color: red;
}
input[type="text"]:optional {
border-color: green;
}read-only
<input>などの要素が読み取り専用であることを表します。
読み取り専用はreadonly属性を指定することで設定できます。
<input type="text" readonly><br>
<input type="text">input[type="text"]:read-only {
color: red;
}target
ページ内リンクで選択された状態を表します。
<p id="preview-link-1" class="page-link">リンク1</p>
<p id="preview-link-2" class="page-link">リンク2</p>
<a href="#preview-link-1">リンク1へ</a>
<a href="#preview-link-2">リンク2へ</a>.page-link:targer {
color: red;
font-weight: bold;
}link, visited
<a>において、リンク先へ訪問したことがない（link）か訪問したことがある（visited）かを表します。
a:link {
color: black;
}
a:link {
color: red;
}要素の指定
first-child, last-child
first-childは、指定した要素の兄弟の中で最初の要素を表します。last-childは最後の要素を表します。
<div class="elm">
<p>child1</p>
<p>child2</p>
<p>child3</p>
</div>
<div class="elm">
<p>child1</p>
<p>child2</p>
<p>child3</p>
<p>child4</p>
<p>child5</p>
</div>.elm > p:first-child {
color: red;
}
.elm > p:last-child {
color: blue;
}child1
child2
child3
child1
child2
child3
child4
child5
nth-child, nth-last-child
nth-childは、指定した要素の兄弟の中で、先頭からn番目の要素を表します。nth-last-childは末尾からn番目の要素を表します。
<div class="elm">
<p>child1</p>
<p>child2</p>
<p>child3</p>
<p>child4</p>
<p>child5</p>
</div>.elm > p:nth-child(4) {
color: red;
}
.elm > p:nth-last-child(4) {
color: blue;
}child1
child2
child3
child4
child5
また、nを使って倍数を指定することができます。2nとすると 2 の倍数（偶数）番目の要素となります。
/* 偶数番目 */
.elm > p:nth-child(2n) {
color: red;
}
/* 奇数番目 */
.elm > p:nth-child(2n-1) {
color: blue;
}child1
child2
child3
child4
child5
not
notは指定したセレクター以外の要素を表します。
<div class="elm">
<p>child1</p>
<p>child2</p>
<p class="not-elm">child3</p>
<p>child4</p>
<p>child5</p>
</div>.elm > p:not(.not-elm) {
color: red;
}child1
child2
child3
child4
child5
以下のように:first-childなどと合わせることもできます。
.elm > p:not(:first-child) {
color red;
}child1
child2
child3
child4
child5
is
isは、複数のセレクターを 1 つにまとめるために使用します。
例えば以下のような CSS があったとします。
.elm1 > p,
.elm2 > p,
.elm3 > p {
color: red;
}これをisを使ってまとめると以下のようになります。
:is(.elm1, .elm2, elm3) > p {
color: red;
}