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

E:nth-child(even)

oddの逆で、出現場所が偶数の場合のみCSSが適用されます。

注）このコードはSafari4.0で確認してください。

div p:nth-child(even) {

color: red;
}

HTMLは、次の通りです。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:only-child

Eで指定されたDOMエレメントのうち、その親要素内で唯一の子要素である （兄弟要素を持たないエレメント）に対してCSSを適用します。

div p:only-child {

color: red;
}

HTMLは、次の通りです。

<div>
<p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

二つ目のDIVタグにはPタグが2つ存在し、兄弟関係にあります。なので、CSSは適用されません。

E:checked

ラジオボタン、チェックボックスがチェックされた状態のときにスタイルを指定します。

div input:checked + span {

color: red;
}

HTMLは、次の通りです。

<div>
    <input type="checkbox" /><span>チェックボックス</span>
</div>

+を使って、inputタグの弟要素に対してCSSを設定しています。

次のセレクタはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:first

E:last

E:nth(n)

E:odd

E:even

E:contains(foo)

E:nodeValue(foo)

E:not(S)

Eで指定されたDOMエレメントのうち、sでないものにCSSを適用します。

p:not(.x-bar) {

color: red;
}

HTMLは、次の通りです。

<p class="x-foo">文章 文章 文章</p>
<p class="x-bar">文章 文章 文章</p>
<p class="x-foo">文章 文章 文章</p>

x-barにはCSSが適用されません。条件としては、x-barでないPタグに対してCSSを適用する形になっています。

次のセレクタはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:has(S)

E:next(S)

E:prev(S)

CSS値セレクタ

次のセレクタはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E{display=none}

E{display^=none}

E{display$=none}

E{display*=none}

E{display%=2}

E{display!=none}