セレクタというもの

博士Ｈ：

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

生徒Ａ：

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

博士Ｈ：

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

生徒Ｂ：

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

博士Ｈ：

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

生徒Ａ：

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

博士Ｈ：

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

.クラス名

生徒Ｂ：

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

博士Ｈ：

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

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

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

.red-font { color : red }

とゆークラスを作って、


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

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

生徒Ｂ：

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

博士Ｈ：

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

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

生徒Ａ：
生徒Ｂ：

・・・・・・・・。

博士Ｈ：

クラスぎる色。

生徒Ｂ：

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

博士Ｈ：

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

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

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


.red-font { color : red }
h1.red-font { color : red ; font-style : italic }
h2.red-font { color : red ;font-size : small }
博士Ｈ：

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

生徒Ｂ：

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

博士Ｈ：

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

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

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

生徒Ｂ：

へー、便利。

生徒Ａ：

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

博士Ｈ：

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

生徒Ｂ：

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

博士Ｈ：

ほほー、その通りじゃ。

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

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

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

生徒Ａ：

なんでですか？

博士Ｈ：

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

生徒Ａ：

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

博士Ｈ：

そうなのじゃ。

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

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

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

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

博士Ｈ：

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

生徒Ｂ：

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

博士Ｈ：

えーっと、パス。

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

生徒Ａ：

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