mozilla
Your Search Results

    子セレクタ

    概要

    「>」結合子は 2 つのセレクタ間に置かれ、第 1 セレクタにマッチする要素の「直接の子要素」のうち、第2セレクタにマッチする要素とマッチします。比較として、子セレクタの代わりに「子孫セレクタ」が使われた場合には、第 1 セレクタにマッチする要素の「子孫要素」のうち、第 2 セレクタにマッチする要素とマッチします。子孫セレクタでは DOM 階層間の「飛び越え」回数は無関係です。

    構文

    selector1 > selector2 { style properties }
    

    span { background-color: white; }
    div > span {
      background-color: DodgerBlue;
    }
    

    次のマークアップに用いると:

    <div>
      <span>Span 1. In the div.
        <span>Span 2. In the span that's in the div.</span>
      </span>
    </div>
    <span>Span 3. Not in a div at all</span>
    

    結果はこうなるでしょう:

    Span 1. In the div. Span 2. In the span that's in the div.
    Span 3. Not in a div at all.

    仕様書

    仕様書 策定状況 コメント
    CSS Selectors Level 3 勧告  
    CSS 2.1 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート (有) (有) 7.0 (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?

    関連情報

    • ---

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す