制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさ耳を着けた女子大生キャラクタ。次ぎ
主な作品

ソフトコンタクトを入れる堀北真希うさぎのイラストとその場面を含む仮想TVコマーシャル動画〜昔のボシュロムのCM風に〜

CSSのセレクタ。

「HTML&CSS入門」の『CSS入門篇』では、CSSのセレクタについて、全称セレクタ, タイプ(要素)セレクタ及び<a>要素の擬似クラスのみを取り上げました。

ここでは、他のセレクタについても見ていきましょう。

CSSのセレクタ・目次。

クラスセレクタ。

スタイル定義に名前を付ける時に用います。

具体的には特定の要素にクラス名を付けるやり方と、要素を問わないクラス名を付けるやり方の二つがあります。

特定の要素にクラス名を付ける場合。

例えば、<p>要素に「note」というクラスを当てる場合、以下のように記述します。

p.note {
        …
    }

このように、要素名に続けて「.クラス名」と記述します。

要素を問わないクラス名を付ける場合。

例えば、要素を問わない「note」というクラスを当てる場合、以下のように記述します。

.note {
        …
    }

このように「.クラス名」と記述します。

実際にクラスセレクタを適用するには。

実際にクラスセレクタで定義したスタイルを当てる場合には、当該クラスを当てたいHTML要素に「class="クラス名"」属性でクラスを指定します。class属性は<body>要素の内容となる全ての要素に適用できます。

例えば、ある<p>要素に「note」というクラスを当てる場合、以下のように記述します。

<p class="note">…</p>

当該タイプ(要素)セレクタでスタイルが定義されていて、そのスタイル定義がclass属性で指定したクラスセレクタでの定義と矛盾する場合は、クラスセレクタの定義が適用されます。

例えば、以下のように記述されている場合、<p>要素のスタイル定義では文字表示色は黒、.noteクラスのスタイル定義では赤となります。

p {
    color: #000;
    }

.note {
    color: #f00;
    }

この場合、以下の<p>要素は.noteクラスで定義した赤での表示となります。

<p class="note">…</p>

また、クラスで定義していないプロパティは元の要素の定義を継承します。つまり、クラスでのスタイル定義は元のタイプ(要素)セレクタのスタイル定義を部分的或いは全面的に書換える形になります。

複数クラス名の同時指定。(平成17年 8月23日)

複数のクラス名を同時に単一のクラスセレクタとする事も出来ます。

CSSでの複数クラス名セレクタの書き方。

例えば「menu」「timeTable」と言う二つのクラス名を持つ<ul>要素に対するセレクタは以下のように書きます。

つまり、複数クラス名を同時指定するには、「.」でクラス名を続けて行けばいい訳です。

実際にHTML文書中の要素に複数クラス名を当てるには。

ところで、HTML/XMLでは一つの要素に同じ属性名を複数入れる事は出来ません。

そこで、一つの要素に複数クラス名を当てるには、当該要素のclass属性値に複数のクラス名を空白文字で区切って並べる事になります。

例えば「menu」「timeTable」と言う二つのクラス名を持つ<ul>要素の開始タグは以下のように書きます。

クラスセレクタの適用範囲。

クラスセレクタは、当てられているクラス名を全て含む要素を指定します。

つまり、HTML文書側に余計なクラス名が含まれていても、セレクタで当てられたクラス名が全部含まれていれば対象となります。

例えばul.menu.timeTableセレクタは、

複数クラス名を利用するに当たっての注意事項。

旧型のブラウザには複数クラスに対応していないものが多いです。

インターネットエクスプローラ
マッキントッシュ版・ウィンドウズ版ともは4.xは非対応です。
ネットスケープ 4.x
当然ながら(？)非対応です。

一方、もじら系ブラウザ, オペラ 6.x以降及びサファリなど最新のブラウザは当然ながらどれも対応しています。

注意。

一意セレクタ(IDセレクタ)。

一意セレクタまたはIDセレクタはクラスセレクタと同様、特定のスタイルに名前を付けるものですが、一本のHTMLリソースに一箇所しか当てられないと言う制約があります(クラスセレクタは何箇所でも当てられます)。

クラスセレクタと同様、特定の要素にIDを付けるやり方と、要素を問わないIDを付けるやり方の二つがあります。

特定の要素にIDを付ける場合。

例えば、<p>要素に「main」というIDの付いた一意セレクタを当てる場合、以下のように記述します。

p#main {
        …
    }

このように、要素名に続けて「#ID」と記述します。

要素を問わないIDを付ける場合。

例えば、要素を問わない「main」というIDの付いた一意セレクタを当てる場合、以下のように記述します。

#main {
        …
    }

このように「#ID」と記述します。

実際に一意セレクタを適用するには。

実際に一意セレクタで定義したスタイルを当てる場合には、当該IDを当てたいHTML要素に「id="クラス名"」属性でIDを指定します。id属性は<body>要素の内容となる全ての要素に適用できます。

例えば、ある<p>要素に「main」というIDを当てる場合、以下のように記述します。

<p id="main">…</p>

子孫セレクタ。

あるセレクタが当てられている要素の下位要素に関して適用されるセレクタです。

例えば、<p>要素の下位要素となる<em>要素にスタイルを適用する場合、以下のように記述します。

p em {
    …
    }

このように「上位セレクタ 下位セレクタ」と空白で区切って記述します。

尚、子孫セレクタでは、セレクタの上下関係だけで適用されます。つまり、下位セレクタが上位セレクタの直下で無くても適用されます。

直下セレクタ(子供セレクタ)。

あるセレクタが当てられている要素の直下となる要素に関して適用されるセレクタです。子孫セレクタと違って直下とならない下位セレクタには適用されません。

例えば、<p>要素の直下要素となる<em>要素にスタイルを適用する場合、以下のように記述します。

p>em {
        …
    }

このように、「上位セレクタ>下位セレクタ」と言うように、「>」で区切って記述します。

この場合、子孫セレクタと異なり、例えば以下のようなHTML文書においては適用範囲が変わります。

<p>
    …<a>…<em>…</em>…</a>…
    </p>

上記の場合には<em>要素は<p>要素の直下とならないため適用されません(ここでの<p>要素の直下要素は<a>要素です)。

隣接セレクタ。

あるセレクタの直後に続くセレクタが対象となります。

例えば、<h2>要素の直後に続く<p>要素にスタイルを適用する場合、以下のように記述します。

h2+p {
        …
    }

このように、「先行セレクタ+対象セレクタ」と言うように、「+」で区切って記述します。

属性セレクタ。

属性セレクタには幾つかありますが、ここでは最も単純なものを解説します。

単純な属性セレクタ。

特定の属性が当てられている要素を適用対象とする場合、属性セレクタとして「[属性名]」を指定します。

勿論、タイプ(要素)セレクタなどの他のセレクタとの併用も可能です。

例えば、title属性が当てられている全要素に同じスタイルを定義したい場合、以下のように記述します。

[title] {
        …
    }

この定義は、全称セレクタとセットで使っても同じ結果になります。すなわち、上記の定義は以下のようにも書けます。

*[title] {
        …
    }

また、title属性が当てられている<a>要素に対してスタイルを定義したい場合は、以下のように<a>タイプ(要素)セレクタと併記します。

a[title] {
        …
    }

属性値も定めた属性セレクタ。

例えば、「title="Value"」属性が当てられた要素(要素の種類は問わない)に対してスタイルを当てる場合は、以下のように記述します。

[title="Value"] {
        …
    }

あるいは、「tabindex="0"」属性が当てられた<a>要素(特定の要素)に対してスタイルを当てる場合は、以下のように記述します。

a[tabindex="0"] {
        …
    }

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com