トップページ > TIPS > CSS記述の優先度

CSSレイアウト[TIPS]

CSS記述の優先度

CSSは後に書かれた指定ほど優先順位が上になるのが基本。前の指定を後の指定が上書きする。
この法則に当てはまらないものに、後述の「条件付きセレクタ」と「!important付き指定」がある。
HTML上での読み込み順による優先度
HTML上での読み込みが後の方ほど優先される。外部CSSファイル読み込みでも、HTMLに直接書き込む場合でも同じ。
例えば、外部ファイルをHTMLの<head></head>内に下記のような順番でCSSを読み込んだ場合は、
<link rel="stylesheet" href="first.css" type="text/css" />
<link rel="stylesheet" href="second.css" type="text/css" />
この場合、後で読み込まれる「second.css」の指定が優先される。
例えば「first.css」に下左記のような指定があり、「second.css」で下右記のように指定すると、このHTMLでは文字色は黒(#000000)になる。
文字色以外の指定は書き換えられていないので「first.css」の指定がイキ。
/* first.css */
body {
color: #666666;
text-align: center;
margin-top: 0px;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
background: #FFFDDE url(../img/body_bg.jpg) repeat-x;
}
/* second.css */
body {
color: #000000;
}
同じスタイルシート上での読み込み順による優先度
同じスタイルシート上でも、後で書かれたものほど優先される。
下の例はメニューボタンにリストを使い、ロールオーバー時に画像を変更するCSS。
#sidesubspace li a {
background: url(../img/navisub.gif) no-repeat 0px 0px;
display: block;
width: 140px;
height: 20px;
}
#sidesubspace li a:hover {
background: url(../img/navisub.gif) no-repeat -140px -20px;
}

「sidesubspace」というボックス内にあるリストをボタン化しているが、まず、このボタンの通常時は、140×20pxのボックスで、navisub.gifという画像を上と左0pxの位置で配置する、という指定をしている。
その後、ロールオーバー時の様子を指定では、上書きするのはボタン画像の位置だけなので、それ以外の「display」「width」「height」は省略している(画像の位置以外は前の値がイキ)。
もしかして、これは、記述の優先度というより、リンクのCSSの特長なのかもしれないが。

※「a」や「a:hover」等に関する詳細はこちら→「リンクの指定」

「条件付きセレクタ」では、詳細さによる優先度
条件付きセレクタで指定した場合、条件がより詳細なものほど優先。
下記の例では、「a」の条件(何の中の何か)がより詳しいほうが優先される。
#outline #side #sidesubspace li a{略}
      優先↑
#sidesubspace li a{略}
!important

「!important」を付けると優先度は増す。
しかし、「!important」を付けたユーザ設定には負けるという法則がある。

HTML上のCSSと、ユーザのCSS設定、ブラウザの初期設定との優先順位は以下の通り。
「HTML内のCSS」>「ユーザ設定」>「ブラウザの初期設定」
「!important」を付けたユーザ設定は、HTML内のCSSより優先度は高くなる。
「!important付きユーザ指定」>「!important付きHTML内のCSS指定」>「HTML内のCSS指定」

!importantの付け方は下記のように、指定の末尾に「!important」を記述する。
(例)p { font-size : 18pt !important }

個人的には「!important」を使う必要性を今のところ感じない。普通にHTML要素にCSS指定をしてあげていれば良い。よほどの事情のあるユーザで無い限り!important指定はしないないだろうし、その事情に逆らう理由が無いので。