1と2の間辺りからはじめるCSS講座セレクタというもの

もくじ
目次を飛ばして本文へ
博士H:

今回は、セレクタについて説明していくじゃ。

生徒A:

セレクタって、要素名を書くだけじゃないんですか?

博士H:

基本的にはそうなのじゃが、
他にも便利な使い方があるんじゃよ。

生徒B:

分かった!
先頭に.(ドット)とか:(コロン)が付いてるアレのことだろ。

博士H:

その通りじゃ。
まずは.(ドット)で始まるセレクタから解説していこうかの。
これはクラスセレクタと言うて、

生徒A:

あ、class属性を使うんですね!

博士H:

うむ。よく勉強してきたのぅ。
書き方は、こうじゃ。

.クラス名

生徒B:

・・・・・まんまじゃん。

博士H:

だぁかぁらっ、CSSは簡単に出来てるのじゃっ

で、この設定を使いたい要素に、
class="クラス名"とするのじゃな。

例を出して説明するのが早いじゃろ。
例えば、

.red-font { color : red }

とゆークラスを作って、


<span class="red-font">赤色の文字</span>
<div class="red-font">赤色の文字</div>
<code class="red-font">赤色の文字</code>

博士H:

とすると、その文字はぜーんぶ赤く表示されるのじゃよ。

生徒B:

colorっつーのは、
文字の色を変えるプロパティって事だな。

博士H:

そうじゃな。
背景色に対して前景色と呼ばれとる。

話がそれとるが、背景色に暗い色を使って、
文字にクラスぎる色を使うと、
見えにくいので注意することじゃ。

生徒A:
生徒B:

・・・・・・・・。

博士H:

クラスぎる色。

生徒B:

いや、何度も言わなくても聞こえてるから。

博士H:

おぉ、そうじゃったのか。

このセレクタは、
要素のセレクタ(単純セレクタというのじゃ)と同じく、
classで何度も呼び出せるし、
そのセレクタの宣言を書きかえることで、
そのクラスが使われとるすべての要素の
プロパチィ値を変更することができるのじゃ。

それから、前に要素名を添えることで、
その要素に限定したクラスを作ることが
できる
ぞぃ。


.red-font { color : red }
h1.red-font { color : red ; font-style : italic }
h2.red-font { color : red ;font-size : small }

博士H:

こうすると、
class="red-font"のh1要素は斜体の赤い文字で、
class="red-font"のh2要素は小さ目の赤い文字で、
class="red-font"の他の要素はただ赤文字で
表示されるぞい。

生徒B:

ol liみたいに、
間にコンマもドットもコロンもないのがあるんだけど、
これって間違ってるんじゃないの?

博士H:

いやいや、それもセレクタの一種なのじゃよ。
olに入れ子になっているli
効果を限定するセレクタじゃ。

これは子孫セレクタと呼ばれとる。

もっと細かく、
div h1 span span
なんてこともできるぞぃ。
この場合は、
divに入れ子になっている
h1に入れ子になっている
spanに入れ子になっているspanに、
宣言が適用されるのじゃな。

生徒B:

へー、便利。

生徒A:

博士、コロンの付いたものは何なんでしょう。
見たところ、要素名を続けるんじゃなさそうだけど。

博士H:

うむ、これは疑似クラス疑似要素と言っての、

生徒B:

クラスや要素モドキの働きをするって事か。
わざわざ別に用意してあるって事は、
普通は適用出来ないような部分って事だな。

博士H:

ほほー、その通りじゃ。

以下が疑似クラスの一覧じゃ。

疑似クラス一覧
:link このセレクタで未読リンクの
スタイルを設定するじゃ。
bodylinkと同じようなものじゃが、
linkでは、色しか設定できなかったじゃろ。
:visited このセレクタで既読リンクの
スタイルを設定するのじゃな。
bodyvlinkと同じようなものじゃが、
vlinkでは、色しか設定できなかったじゃろ。
a:hover マウスカーソルがリンクの上に来た時の
スタイルを設定するじゃ。
こればっかりは、HTMLにも類似したものはないのじゃナ。
a:active このセレクタで選択状態のリンクの
スタイルを設定するじゃよ。
bodyalinkと同じようなものじゃが、
alinkでは、色しか設定できなかったじゃろ。
博士H:

書く時も、以上の順番での。

生徒A:

なんでですか?

博士H:

順番を変えたら、例えば
リンクにカーソルが載っても
せっかく書いたスタイルが適用されんじゃろが。

生徒A:

そうか、
後ろに書いたスタイルのほうが強いんですね!

博士H:

そうなのじゃ。

正確には、まず詳細度というのがあって、
それで負けたら、じゃ。

詳細度とゆうのは
「このセレクタの緻密さはどんくらいかのー」というのを
示すもので、簡単に言えば、
それが高いほうが、より細かい指定がされておるから
優先的に適用されるということ何じゃ。

  • style属性は無条件で勝ち
  • クラスが多いほうの勝ち
  • それが同じなら、要素名の多いほうが勝ち
  • それも同じなら、あとのほうが勝ち
生徒A:

んっと、疑似クラスはクラスの一種と考えるんですか?

博士H:

そうじゃ。同じように、
疑似要素は要素の一種と考えるのじゃ。

生徒B:

疑似要素の解説は。
あ、それとなんで:hover:activeだけa付いてんの?
これって要素名だろ。

博士H:

えーっと、パス。

んじゃ、また次の授業で。

生徒A:

博士、どこ行くんですかーっ。

<どうやってHTMLにくっつけるの?[P] レイアウトの基本、ボックス[N]>

▲見出しへ戻る
最終更新日:2006年09月08日
Copyright © 2001-2003 ばあど All Rights Reserved.