CSS子孫セレクター (A B) — ネストされた要素の選択

CSS子孫セレクター

子孫コンビネータ（2つのセレクター間のスペース）は、指定された祖先の子孫である要素を、任意のネストの深さでマッチします。

構文

/* .nav内のすべての<a>要素を選択 */
.nav a {
  text-decoration: none;
}

仕組み

ブラウザはセレクターを右から左に読み取ります。.nav aの場合、まずすべての<a>要素を見つけ、次にそれぞれが.navクラスを持つ祖先を持っているか確認します。ターゲット要素は直接の子でも、多くのレベルの深さにネストされていてもかまいません。

子孫セレクターと子セレクターの比較

コンビネータ	構文	深さ
子孫	A B	任意の深さ
子	A > B	直接の子のみ

詳細度

詳細度は両方の部分の合計です。.nav a = (0, 1, 0) + (0, 0, 1) = (0, 1, 1)。

パフォーマンスの考慮事項

body div ul li a spanのような深くネストされた子孫セレクターは、ブラウザに多くのDOMレベルをトラバースさせます。より良いパフォーマンスと保守性のために、短いクラスベースのセレクターを使用してください。