前回 は、文量の関係で、スタイルの記述を、
スタイルをあてたい要素名 {プロパティ: 値;}と説明してしまいました。我ながら誠に遺憾です。
正確には、
セレクタ {プロパティ: 値;}というように記述します。
なので今回はセレクタについて説明します。
セレクタとは
セレクタとはなにか。それはタグに呼びかける際の範囲のようなものです。
例えば、
li {color: red;}
という用に書いた場合、
「おーい。liタグー。文字を赤くしといてー。」
というような指示を出すことができます。
この liタグ の部分が セレクタ です。
セレクタにはおおきく、
- タグ名
- クラス名
- ID名
- 属性
- みんな
の5種類があります。
前述の、
li {color: red;}
という記述では、セレクタにタグ名をつかっているわけです。
世の中にはいろんなセレクタがありますが、今回はみんなに呼びかけたい場合を例にとってセレクタについて説明したいと思います。
みんなに呼びかける場合
みんなに呼びかける場合は、
* {color: red;}
というような感じで、*をセレクタに使いましょう。
このように記述すると、
「おーい。みんなー。文字を赤くしといてー。」
という呼びかけになり、表示されているすべてのテキストが赤くなります。
セレクタの優先度
指示を何度も出した場合
p {color: red;} p {color: blue;}
というように同じセレクタを2回記述したら、pタグの文字色は何色になるでしょうか。
これは、
「おーい。pタグー。文字を赤くしといてー。」
「おーい。pタグー。文字を青くしといてー。」
と2回呼びかけたことになるので、2回めのほうが優先され、pタグの文字色は青くなります。
そう。同じセレクタを使って呼びかけた場合は後に出した指示ほど優先されるのです。
余談ですが、同一セレクタ内に、
p { color: red; color: blue; }
と、同じプロパティを2回書いた場合も後者が優先されます。
これは、
「おーい。pタグー。文字を赤くしといてー。文字を青くしといてー。」
と呼びかけているようなものです。
いろんな指示を出して振り回したとしても、結局最後の指示が優先されるわけです。はい。
違う呼びかけで指示を出した場合
* {color: red;} p {color: blue;}
と書いた場合、pタグの文字色は何色になるでしょうか。
「おーい。みんなー。文字を赤くしといてー。」
「おーい。pタグー。文字を青くしといてー。」
と、呼びかけているわけですが、pタグの文字色は青くなります。
これは呼びかけの順序の問題ではありません。
p {color: blue;} * {color: red;}
「おーい。pタグー。文字を青くしといてー。」
「おーい。みんなー。文字を赤くしといてー。」
という順序で呼びかけたとしても、pタグの文字色は青くなります。
まあ、セリフに置き換えるとなんとなく感覚でわかるような気がしますが、呼びかける範囲が狭ければ狭いほど、その呼びかけの強さが変わってくるのです。
基本的に、呼びかけの範囲が狭くなれば狭くなるほど、その指示が優先されるようになります。
クラス全員に義理チョコを配ってる女の子からもらったチョコと、1人にしかチョコをあげないことがわかっている女の子からもらったチョコでは重さが違う。そんなかんじでしょうか。
なので、タグに直接スタイルを書き込めるスタイル属性が基本的には最強ということになります。
なんてったって1つのタグにしか指示をだせないわけですから。
つまり、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>最強セレクタ決定戦</title> <style> * {color: red;} p {color: blue;} </style> </head> <body> <p style="color: green">しゃっきりぽん。</p> </body> </html>
と書くと、
pタグは、
「おーい。みんなー。文字を赤くしといてー。」
「おーい。pタグー。文字を青くしといてー。」
と2度呼びかけられた後に、
直接styleタグにスタイルを書き込まれ、結果的に、しゃっきりぽん は緑色で表示されます。
※ スタイル属性に打ち勝つ呼びかけかたもあるのですが、ここでは説明を省略します。
今回は以上です。
