Css selector

id 属性
class 属性

を使おう!

id属性、class属性を使おう!
<h3>会社概要</h3>

<h3>お問い合わせ</h3>
【html】
文字色をつけたい


h3 {
color:#009900;
}
【css】
【html】
文字色をつけたい


h3 {
color:#009900;
}
【css】
【html】
それぞれ違う
文字色にしたい

<h3 class=“about”>会社概要</h3>

<h3 class=“contact”>お問い合わせ</h3>
【html】
【css】
h3 {
color:#009900;
}
それぞれ違う

【css】
【html】
h3.about{
color:#009900;
}

h3.contact{
color:#990000;
}
それぞれ違う

<h3 class=“contact”>お問い合わせ</h3>

<h3 id=“about”>会社概要</h3>

<h3 id=“contact”>お問い合わせ</h3>
【css】
【html】
h3#about{
color:#009900;
}

h3#contact{
color:#990000;
}
それぞれ違う

セレクターの意味
　 .
classの指定
　 #
idの指定
＊idはページ内に１つしか
　出てこない要素

タグでの絞り込み
h3.about ⇦ h3タグのabout

p.about ⇦ pタグのabout

.about ⇦ about class全部

<p class=“abouA”>創立1995年です。</h3>

階層での絞り込み
<div class=“about”>
<h3>…</h3>
</div>

<div class=“contact”>
<h3>…</h3>
</div>
.about h3{
color:#009900;
}

.contact h3{
color:#990000;
}

【Index.html】【style.css】

CSSの上書き
P{
color:#009900;
}

P{
color:#000000;
}
セレクタが一緒

CSSの上書き
P{
color:#009900;
}

P{
color:#000000;
}
後ろが優先

CSSの上書き
.about h3{
color:#009900;
}

h3{
color:#000000;
}
セレクターが多い方が優先
<div class=“about”>
<h3>…</h3>
</div>
【Index.html】
【style.css】

CSSの上書き
#aaa{
color:#009900;
}

.bbb{
color:#000000;
}
IDが優先
<h3 id=“aaa” class=“bbb”>…</h3>
【Index.html】
【style.css】

* 　ユニバーサルセレクタ　
すべての要素が対象
*{
margin:0;
padding:0;
}
優先順位は最下位

!important
p {
color: red !important;
}
最優先になる

CSSのポイント換算
タグ 1 point
クラス 10 point
ID 100 point

Css selector

More Related Content

More from sayoko miura (20)

Css selector