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

お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30

CSSの基本とCSSセレクター

E:first-child

Eの親要素の最初の子要素として出現した、Eで指定されたDOMエレメントに対してCSSを適用します。

p:first-child {

    color: red;
}

div p:first-child {
    color: blue;
}

一つ目は、ドキュメントの中に出てくる最初のPタグに対してCSSを適用しています。2つめは、DIVタグの中に出現する最初のPタグに対してCSSを適用しています。

HTMLは、次の通りです。

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

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

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

E:last-child

E:first-childの逆になります。最後に出現したEに対してCSSを適用します。

p:last-child {

color: red;
}

div p:last-child {
     color: blue;
}

HTMLは、次の通りです。

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

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

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

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

E:nth-child(n)

Eで指定されたDOMエレメントのうち、その親要素のn番目の子要素であるDOMエレメントに対してCSSを適用します。

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

div p:nth-child(3) {
    color: red;
}

DIVタグの中に出現する三番目のPタグに対してCSSを適用しています。

HTMLは、次の通りです。

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

次のように3番目の要素が、Pタグでない場合は、CSSは適用されません。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <span>SPAN</span>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:nth-child(odd)

oddを指定すると、出現場所が奇数の場合CSSが適用されます。

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

div p:nth-child(odd) {

color: red;
}

HTMLは、次の通りです。

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