徐々に増えていた擬似クラスの世界

ひょんな拍子にMDNの擬似クラスのページを覗いてみたら、思いの外大量にありました。

入力フォーム関係

:checkedはチェックボックスやラジオボタンがチェックされている場合に有効となります。ラベルなどで自前描画している場合には便利です。

:requiredや:optionalは、入力フォームの必須状態に依存する擬似クラスです。「必須なフォームだけ色を付ける」としてもいいかもしれません。

:valid、:invalid、:in-range、:out-of-rangeは、フォームバリデーションに関する値です。隣接セレクタと絡めれば、「invalidなときだけ文言を表示」ということも、CSSだけで可能です。

複雑なセレクタを構築する

まだあまり普及していませんが、:is()というセレクタがあって、カッコの中にカンマ区切りでセレクタを並べることで、「どれか1つ」を表現することができます。

h1, h2, h3, h4, h5, h6 {
  a{
    /* 内容は省略 */
  }
}

/* :isを使えば、SCSSなしで同じものを書ける */

:is(h1, h2, h3, h4, h5, h6) a{
  /* 内容は省略 */
}

IE11が非対応なこと、Firefoxが:-moz-anyという名前でないと動かないことなど、実用にはちょっとステップが必要そうですが、セレクタの組み合わせ爆発を回避できそうなのは便利です。

まだ実装はないけれど

提案中で使える環境はないのですが、:has(セレクタ)として、子孫要素を条件として親要素を選べるセレクタも、将来的には実装されるかもしれません。