仕様解説
CSSセレクター総ざらい
9

最終回はCSSの持つ一見複雑な詳細度を、実際の実装の中でどのようにコントロールするか、またどんなことに気をつけているのか、筆者の体験をもとに解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

セレクターには詳細度というものがあります。ひとつの要素に対して複数のCSS宣言がなされた場合、詳細度を計算して、適用するCSSが定められます。この記事では詳細度について解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

擬似要素の実装にはちょっとした落とし穴があります。この回では、それらの注意点を取り上げて解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

Selectors Level 4の仕様書を元に、セレクターの総ざらいをしています。今回から擬似要素の解説に入ります。まずは、擬似要素の基本と、業務でよく使う擬似要素と、その利用方法を解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

フォームやユーザーの動作に対応する擬似クラスを解説します。将来的に使えるようになるかもしれない仕様についても触れます。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

文書構造を利用しながら、特定の要素を指定する擬似クラスを解説します。Selector Level 4では引数にセレクターを渡すこともできるようになります。少し未来の仕様ものぞいてみましょう。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

セレクターに付与されるキーワードで、セレクターで選ばれた要素が特定の状態になったときを示す擬似クラスを解説します。普段、ホバーなどの擬似クラスはよく使っていると思いますが、それ以外にも多くの擬似クラスがあります。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

2回目はある要素の子要素、子孫要素、兄弟要素の選択ができる結合子の解説をします。4種類ある結合子の特徴を押さえることで、目的の要素に適切なスタイルを付与できます。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

第1回目では、まずセレクター一般についての説明をします。次に5種類の基本セレクターについて解説します。普段の業務で使っているセレクターを今一度、基本仕様から押さえてみましょう。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア