CSS Descendant Selectorとは何ですか？

HTML文書の構造は、ファミリーツリーに似ています。 あなたの家族には、あなたの両親とあなたの前に来た他の人たちがいます。 これらはあなたの祖先です。 子供たちとその木の上であなたの後に来る者はあなたの子孫です。 HTMLも同様の方法で動作します。 他の要素の内部にある要素はその子孫です。 たとえば、ほとんどのHTML要素はタグの内側にあるため、要素の子孫になります。 この関係は、CSSの使用を開始するときに理解するために重要であり、ビジュアルスタイルを適用するために特定の要素をターゲットにする必要があります。

CSS降順セレクタ

CSS子孫セレクタは、別の要素の中にある要素（または、より正確に言えば、別の要素の子孫である要素）に適用されます。 たとえば、順序付けられていないリストにはタグを子孫として持つタグがあります。 例として次のHTMLを使用しましょう：

• これはリンク

  LIタグはULタグの子孫です。 Aタグは、LI（子孫）タグとUL（孫タグ）タグの両方の子孫です。 親子ツリーの例を使って考えて考えると、

  は親になり、
  • はその要素の子になり、は
  • の子となり、孫は
    。

    では、これらの子孫セレクタを使用して、Webページの特定の要素をどのようにターゲットにしますか？ まず、2つ（またはそれ以上）のタイプセレクタをスペースで区切って使用して子孫セレクタを定義する必要があります。

    li a {テキスト装飾：なし; }

    この例では、スタイルはリストアイテム要素（

    • ）の子孫であるリンク要素（）にのみ適用されます。 リスト項目の子孫ではないページ上の他のすべてのリンクは、このスタイルを取得しません。

      覚えておくべき重要なことの1つは、子孫セレクタで使用しているタグの間にいくつのタグがあるかは関係ありません。 2番目の要素が最初の要素のどこかに囲まれている場合、それは子孫として選択されます。

      ul要素の子孫であるすべてのアンカーを選択する場合は、次のように記述します。

      ul a {テキスト装飾：なし; }

      これらのスタイルは、リストアイテムの子孫であるリンクに適用されます。 このセレクタを書くこともできます

      ul li a {テキスト装飾：なし; }

      これは、2つ以上のタイプセレクタを使用する子孫セレクタです。 この場合、これは、リストアイテムとして、また順序なしリストの内部にあるリンクに適用されます。

      クラスセレクタとIDセレクタの使用

      下降しているセレクタは、常に型の子孫である必要はありません。 たとえば、ID属性が「billboard」のサイトの領域（部門など）があるとします。 そのIDから子孫セレクタを設定することができます：

      #billboard ul {背景色：#ccc; }

      これにより、IDが "billboard"の要素の子孫である順序付けられていないリストがスタイルされます。 クラス値に対しても同じことができます。

      div.billboard ul {背景色：#ccc; }

      これは、部門が "billboard"というクラス値を持つことを前提としています。 上記のCSSは、このクラス値を持つ任意のディビジョンの中の

      要素をスタイルします。

      子孫のセレクタを使用すると、本当に重い手で冗長になります。 たとえば、Dreamweaverを使用してHTMLコードを記述する場合 、そのページ上のカーソルの配置に基づいてセレクタを自動作成する新しいCSSルールを追加するときの設定があります。 この場合Dreamweaverでは、冗長で冗長な子孫セレクタが作成されます。 その特異性は、あなたのCSSが動作するために必要というわけではありません。 あなたがしたいのは、子孫セレクタとのバランスをとって、セレクタが過度にあるCSSルールを持たずに、必要な正確な要素にドリルダウンできるようにすることです（影響を与えたくない要素をスタイリングせずに）大。