CSSについて復習 id,class,nameの優先度

今日は主にCSSについて勉強しました。恥ずかしながら、こうしたWordPressのようなオープンCMSに頼りきっているせいで、HTMLの基本的な知識がほとんどありません。たまに検索しながらテーマのCSSをいじることはあるのですが、何がどのように作用するのか、それが全く分かっていませんでした。今回はHTMLのdivタグ内でよく使われる「id」,「class」,「name」と「.」「#」についての関連性を、友人にわかりやすく教えてもらったのでメモ代わりに書き起こします。


CSSファイルを見ていてよく見かけるのが、

body{
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#header h1{
margin: 0;
padding: 0;
}
.ex{
background: #ffffff;
height: 30px;
font-weight: bold;
text-align: center;
}

などの記述です。

さすがになんとなくbody{(中略);}の部分はHTMLでどんな風に適用されるのかが想像ついたのですが、特に僕が知らなかったのは#headerや.exなどの意味です。よくよく検索しないのがいけないのですが、検索するよりかその場にいる詳しそうな人に聞くというのが最も速い手段に思えたのでyoko氏に聞いてみたのです。

InternetExplorerでも、safariでも、なんでもいいのですが、Webページの適当な部分で右クリックすると「ソースを表示」みたいなとこがあります。それを選択すると、

<!DOCTYPE>
<html>
<head>
<title>hoge's Web</title>
<link rel="style" href="kuso.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>hoge</h1>
<p>わんこそば</p>
<div class="ex">
<p>トマト食べたい</p>
</div>
</div>
<div class="ex">
<p>やっぱりキュウリが食べたい、それも漬物の</p>
</div>
</body>
</html>

とか出てきます。
このbody部分に対しては

body{
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}

この部分が適用されます。つまりbodyタグ要素内のすべてのhtmlの記述は、ブラウザで開くとこの設定に従って出てくるようになるのです(たぶん)。

では

#header h1{
margin: 0;
padding: 0;
}

の部分はHTMLのどこに適用されるのか。
それは

<div id="header">
<h1>hoge</h1>
<p>わんこそば</p>
<div class="ex">
<p>トマト食べたい</p>
</div>
</div>

↑の

<div id="header">〜</div>

内に適用されるのです。

つまり、なにが言いたいかというと、

CSSにおける

#header{~~~;}


HTMLの

<div id="header">

の部分に適用されるのです。

cssで使った「#」はhtmlのdiv要素における、「id」に反応するのです

では

.ex{
background: #ffffff;
height: 30px;
font-weight: bold;
text-align: center;
}

はHTMLのどこに適用されるのでしょう。
正解は、

<div class="ex">
<p>やっぱりキュウリが食べたい、それも漬物の</p>
</div>

の部分です。
つまり、cssにおける「.」で指定した要素名はHTMLにおける

<div class="ex">

に反応するわけです。

何が言いたいかというと、


cssにおける「#」 => htmlのdivの「id」に反応
cssにおける「.」 => htmlのdivの「class」に反応

しかも、htmlのdivタグ内におけるidとclassには優先度が決まっていて、

優先順位
①id
②class
③name

となっているようです(多分、かなり重要な基礎知識)。

htmlで、idを指定しているdivタグ内でclassを指定すると、cssでの「.」の部分は反映されません。(たぶん)

<div id="header">
<h1>hoge</h1>
<p>わんこそば</p>
<div class="ex">
<p>トマト食べたい</p>
</div>
</div>

「トマト食べたい」の部分に、
cssの

.ex{
background: #ffffff;
height: 30px;
font-weight: bold;
text-align: center;
}

↑の部分は適用されず、#header{~~~;}の中身だけが適用されます。htmlにおけるdivタグのid要素の方が、class要素より優先度が高いことが分かります(分からないかもしれないけど)。

<div id="header">
<h1>hoge</h1>
<p>わんこそば</p>
<div class="ex">
<p>トマト食べたい</p>
</div>
</div>

「トマト食べたい」の部分にcssを適用したいのであれば

#header .ex{
background: #ffffff;
height: 30px;
font-weight: bold;
text-align: center;
}

というようなcssの記述を書き加える必要があるっぽいです。ちなみに確認していません。

※cssのプロパティ値に書いてある値はすべてその場で思いついたことしか書いていないので、完全に適当です。

つまり、本日勉強したことのまとめは


cssにおける「#」 => htmlのdivの「id」に反応
cssにおける「.」 => htmlのdivの「class」に反応

cssを適用するhtmlの、div内要素の優先順位
①id
②class
③name(nameに関してはcssで指定することはあまりないそうです)

となっているようです(多分、かなり重要な基礎知識)。

うろ覚えなので、たぶんソースはコピペしても全然使えません(笑)
自分が覚えていられればいいと思っています。自分でもまだよくわかっていないかも。yoko氏が教えてくれた時はものの30秒で理解できたものの、実際に文字に書き起こしてみると2時間くらいかかりました。

普段からちゃんと勉強していれば当たり前の知識なのかもしれませんが、僕は全然そういうことを知りませんでした。なので今回は恥を忍んで、自分への戒めとして、メモを残します。
何事も、奥が深いものですね。