CSS Selectors Level 4 前半

CSS Selectors Level 4について

追加されたセレクタを解説

:matches()

:matches()は指定された複数のセレクタのいずれかに一致する要素を選択

p:matches(strong, em) {
  color: red;
}

この例では、:matches()擬似クラスを使用し、strong要素またはem要素を内包する全ての

要素に対して、テキストの色を赤に変更する

:where()

:where()は内包するセレクターの詳細度を0に保つ

:where(p:last-of-type) {
  color: red;
}

@media (max-width: 600px) {
  :where(p) {
    color: blue;
  }
}

このように記載することで従来では:last-of-typeで詳細度が上がってしまい、上書きするにはmedia queryの中で再度:last-of-typeを記載するなどの対応が必要であったが:where()で囲むことで詳細度を制御することが可能

:not()

:not()は指定されたセレクターに合致しない要素を選択する
また、複数のセレクターをカンマ区切りで記載することが可能

div:not(.foo,.bar) {
  /* fooクラスとbarクラスを持たないdiv要素にスタイルを適用 */
}

:is()

:is()は複数のセレクタをまとめて指定することが可能

.container .header,
.container .main,
.container .footer {
  font-size: 24px;
}

.container :is(.header, .main, .footer) {
  font-size: 24px;
}

:is()とnot()を組み合わせた例

:is(:not(p),:not(div)) {
  font-size: 18px;
}

:placeholder-shown

:placeholder-shownは、フォームのプレースホルダーテキストが表示されている場合にスタイルを適用するためのCSS疑似クラス
フォームの入力フィールドに何も入力されておらず、代わりにプレースホルダーテキストが表示されている場合にスタイルを適用が可能

input[type="text"]:placeholder-shown {
  color: gray;
}

:read-only

:read-onlyは、読み取り専用の要素に適用する擬似クラスセレクタ
このセレクタを使用することで、input、textarea、select要素などでreadonly属性がtrueのものに適用される

input:read-only {
  background-color: #eee;
}

:read-write

:read-onlyと反対に、読み書き可能な状態の時にスタイルを適用できる
disabled属性が入っている場合もスタイルが適応される

:required

:requiredはformの入力必須の場合にスタイルを適用するための擬似クラス
required属性がある場合に適用される

input:required {
  border: 2px solid red;
}

:optional

:optionalはformの入力必須でない場合にスタイルを適用するための擬似クラス
required属性がない場合に適用される

input:optional {
  border: 1px solid gray;
}

:default

:defaultはユーザーによって入力値が変更されていない、デフォルトの値を持つ要素に対して適用される

input:default {
  color: gray;
}

:indeterminate

:indeterminateはチェックボックスやラジオボタンでチェック済みでも未チェックでもない中間の状態に対してスタイルを適用する

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">Check me!</label>

#myCheckbox:indeterminate {
  background-color: gray;
}
#myCheckbox:checked {
  background-color: green;
}
#myCheckbox:not(:checked):not(:indeterminate) {
  background-color: red;
}

const checkbox = document.querySelector('#myCheckbox');
checkbox.indeterminate = true;

checkbox.addEventListener('change', () => {
  checkbox.indeterminate = false;
  if (checkbox.checked) {
    console.log('Checkbox is checked');
  } else {
    console.log('Checkbox is unchecked');
  }
});