Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

「E > F または E/F」

子セレクタ （Child combinator）と呼ばれる形式です。親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。

h1 > p {

font-size:20px;
}

HTMLは次の通りです。

<h1>
    <p>Ext JS 実践開発ガイド</p>
    <div>
        <p>サブタイトル</p>
    </div>
</h1>

[Ext JS 実践開発ガイド]の文字列だけが、先に定義したCSSが適用されます。DIVタグの中にあるPタグ（サブタイトル）には適用されません。

h1/p

これについては、Ext JSでの利用コード説明時に解説します。

「E + F」

隣接セレクタ （Adjacent sibling combinator）と呼ばれる形式です。EというDOMエレメントから見て、直接の弟要素であるFというDOMエレメントにCSSを適用します。

さて、「弟要素」という言葉が出てきましたが、なんでしょうか。「どうせ、子要素のことでしょ？」なんて思わないでくださいね。弟要素とは、次のようなDOMエレメントの関係をいいます。

<p>Pタグ1</p>
<div>DIVタグ1</div>

Pタグの次のタグがDIVタグになっています。このDIVタグを弟要素といいます。Pタグ以降のタグが弟になるわけです。

上記のDIVタグにCSSを適用するためのコードは次の通りです。

p + div {
    font-size:24px;
}

次の例ではどうでしょうか。

<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>

太字の部分は、CSSが適用されますが、DIVタグ2には適用されません。間にSPANタグがあるため、Pタグの直後の弟要素ではないからです。また、このときのPタグを兄要素といいます。+を使った表現は、直後のDOMエレメントを表現する場合に用います。

「E ~ F」

間接セレクタ （General sibling combinator）と呼ばれる形式です。先ほどの+を使った方式は、直前、直後の弟要素についてCSSを適用するための形式でした。

~（チルダ）を使った、この方式は、先ほどのように直前、直後ではない弟要素についてもCSSを指定することができます。

p ~ div {
    font-size:24px;
}

HTMLは、次の通りです。

<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>

先ほどと違い、Pタグの直後でなくても弟要素であればCSSが適用されるようになります。