5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSAdvent Calendar 2018

Day 20

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

Posted at

ひょんな拍子に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(セレクタ)として、子孫要素を条件として親要素を選べるセレクタも、将来的には実装されるかもしれません。

5
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?