3回続いた基本的なことも今回で最終です。
4回目の内容は、以下のことについて触れております。
んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。
- スタイルの優先順位
- セレクタの組み合わせ
- セレクタのグルーピング
- スタイルの優先順位詳細
スタイルの優先順位
スタイルのもっとも基本的な優先順位は、
「後から読み込んだスタイルを優先的に適用」します。
読み込む順序は、上から読み込まれていくので、、、
p {
color:red;
}
p {
color:blue;
}
のように書いたとしたら、color:blueが優先され、文字は青になります。
基本的な読み込み順序で最低限の部分は、コレだけです。
より詳細な優先順位については後述します。
セレクタの組み合わせ
セレクタは色んなセレクタを組み合わせて指定できます。
子孫セレクタ（空白文字区切り）
親要素に含まれるすべての子孫要素をターゲットにスタイルを適用する方法です。
以下の場合は、箇条書きリストであるul要素のli要素にのみ適用します。
番号リスト（ol）には適用されません。
ul li {
list-style-type:none;
}
これは、タイプセレクタ（要素名）、ユニバーサルセレクタ（*）、classセレクタ、idセレクタ、属性セレクタなどとの併用が可能です。
div#head p .hoge {
color:red;
}
この場合、#headの子要素であるp要素の子要素class名.hogeにのみ適用されます。
子孫セレクタは現状一番使うんで、必ずマスターしましょう。
特に難しくは無いので、すぐに覚えられると思います。
他に、子セレクタ（>区切り）や隣接セレクタなどありますが、練習では特に使う場面がないのと、IE6が対応していないので今回は割愛。
セレクタのグルーピング
セレクタは、半角カンマ（,）で区切ることでグループ化され、複数の要素に同じスタイルを一発で適用させる事ができます。
h2 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
h3 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
h4 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
h5 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
h6 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
こんな風に全く同じスタイルの指定なのに、都度書いてたら面倒ですよね？
そこでグループ化をする訳です。
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
これで一発でh2、h3、h4、h5、h6に、上記スタイルが適用されることになります。
スタイルの優先順位詳細
まずは下記を見て下さい。
/*style 1*/
div#sample p.test span {
color:red;
}
/*style 2*/
div#sample p span {
color:black;
}
こんな風にスタイルが記述されていたら、前述した説明のみだとdiv#sample p spanが優先されてしまうように思われるかも知れませんが、コレは先に書いているdiv#sample p.test spanが優先されます。
それは、スタイルには優先順位を決定するルールとして、個別性の高いスタイルを優先して適用させるってのがあるからです。
具体的に説明すると、
- style 属性がある場合は、1をカウント (= a)
- セレクタに含まれている id 属性の数をカウント (= b)
- セレクタに含まれている id 以外の属性と、擬似クラスの数をカウント (= c)
- セレクタに含まれている 要素、擬似要素の数をカウント (= d)
上記のルールに従い、次のように個別性が計算されます。
- * {} /* a=0 b=0 c=0 d=0 -> 個別性 = 0,0,0,0 */
- li {} /* a=0 b=0 c=0 d=1 -> 個別性 = 0,0,0,1 */
- li:first-line {} /* a=0 b=0 c=0 d=2 -> 個別性 = 0,0,0,2 */
- ul li {} /* a=0 b=0 c=0 d=2 -> 個別性 = 0,0,0,2 */
- ul ol+li {} /* a=0 b=0 c=0 d=3 -> 個別性 = 0,0,0,3 */
- h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 個別性 = 0,0,1,1 */
- ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 個別性 = 0,0,1,3 */
- li.red.level {} /* a=0 b=0 c=2 d=1 -> 個別性 = 0,0,2,1 */
- #x34y {} /* a=0 b=1 c=0 d=0 -> 個別性 = 0,1,0,0 */
- style="" /* a=1 b=0 c=0 d=0 -> 個別性 = 1,0,0,0 */
コレみただけじゃよく分からないっすよね、、、ボクもコレ見ただけだとよく分かりません。
前述の例を計算してみると、、、
- style 1 a=0 b=1 c=1 d=3 -> 個別性 = 0,1,1,3
- style 2 a=0 b=1 c=0 d=3 -> 個別性 = 0,1,0,3
となるので、113 > 103 となり、「style 1」で指定していたcolor:red が優先的に適用されることになります。
ちょっと砕いて書くと、
id（#） が100、class（.） が10、要素、擬似要素が1です。
点数が同じ場合は、冒頭で書いたように「後から読み込んだスタイルを優先的に適用」となります。
感覚として、より具体的に指定しているほど、優先度が高いと認識していただければOKです。
個別性の計算が正確に出来ていればすんなり行くのですが、あまりにも複雑なスタイルになってくると計算するのが大変でよく分からないって事態に陥ることもあります。
そんな時は!important宣言をする事で最優先に表示されます。
宣言の仕方は下記のようになります。
/*style 1*/
div#sample p.test span {
color:red;
}
/*style 2*/
div#sample p span {
color:black !important;
}
!important宣言はあんまりし過ぎないように注意しましょう。
あくまでも奥の手、つまり奥義です！
優先順位を簡単にまとめると、、、
- !important 宣言付きユーザースタイルシート
- !important 宣言付き制作者スタイルシート
- 制作者スタイルシート
- ユーザースタイルシート
となります。
これらの優先順位や個別性の計算に関しては、一応仕様上はそうなっているけど、ブラウザがソレに100％準じているかは定かではありません。
たまにIEだけ優先されないとかあったりするんで、準じてないブラウザさんもいるってことです。
より高みに早々に興味を持ってしまったら、WWW WATCHさんの!important だらけの CSS にお別れを | WWW WATCHとかが素敵です。
すごく素敵だけどボクは負けません！（こんなトコロで宣戦布告してみる）
これで取り合えずCSSに関する基本的なことはおしまいです。
次回からはボクのデザインしたサンプルを元にやっていきます。（やっと当初書こうと思っていた部分に入れる...）
