CSSの三つの特性

📢 この記事は gemini-2.5-flash によって翻訳されました

CSSの三つの特性：継承性、重ね合わせ、優先順位

継承性

子要素は親要素の文字に関するプロパティをデフォルトで継承するけど、もし子要素自身にスタイルがあったら、それは継承しないよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    body {
        font: 30px/0.5 楷体;
        color: aqua;
    }
</style>

<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
        
    <a href="#">色は継承されないよ</a>
</body>

重ね合わせ

セレクターの種類が同じ場合：

同じプロパティは上書きされるよ：後から書いたCSSプロパティが前のCSSプロパティを上書きするんだ。
異なるプロパティは重ね合わされるよ：異なるCSSプロパティはどちらも有効になるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    div {
        color: red;
        font-size: 30px;
    }
    div {
        color: aqua;
        font-weight: 700;
    }
</style>

<div>
    色はアクアで、文字サイズは30px、太字になるよ。
</div>

優先順位

一つの要素に複数のセレクターが使われたら、優先順位が高いスタイルが適用されるよ。優先順位はこんな感じ：

ユニバーサルセレクター < タイプセレクター < クラスセレクター < IDセレクター < インラインスタイル < !important

!importantは普通は使わないよ。次の例では使ってないよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
    #app {
        color: orange;
    }
    .box {
        color: blue;
    }
    div {
        color: red;
    }
    * {
        color: purple;
    }
</style>

<div>タイプセレクター red</div>
<div class="box">クラスセレクター blue</div>
<div class="box" id="app">IDセレクター orange</div>
<div class="box" id="app" style="color: aqua;">インラインスタイル aqua</div>

!importantを使う場合

1
2
3
4
5
6
7
<style>
    div {
        color: aqua !important;
    }
</style>

<div style="color: blue">aqua</div>

複合セレクターの優先順位

優先順位は (インラインスタイル、IDセレクターの数、クラスセレクターの数、タイプセレクターの数) の順番で左から順に比較していくんだ。各項目で数が多い方が優先度が高くなるよ。もし同じだったら次の項目で比較するって感じ。

!importantがあったら一番優先順位が高くて、継承されたものだと一番低くなるよ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* (0, 0, 2, 1) */
    .c1 .c2 div {
        color: blue;
    }
    /* (0, 1, 0, 1) */
    div #box3 {
        color: red;
    }
    /* (0, 1, 1, 0) */
    #box1 .c3 {
        color: aqua;
    }
</style>

<div class="c1" id="box1">
    <div class="c2" id="box2">
        <div class="c3" id="box3">
            aqua
        </div>
    </div>
</div>

例 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    /* (0, 2, 0, 0) */
    #father #son {
        color: aqua;
    }
    /* (0, 1, 1, 1) */
    #father p.c2 {
        color: black;
    }
    /* (0, 0, 2, 2) */
    div.c1 p.c2 {
        color: red;
    }
    /* 継承 */
    #father {
        color: blue !important;
    }
    /* 継承 */
    div#father.c1{
        color: yellow;
    }
</style>

<div class="c1" id="father">
    <div class="c2" id="son">
        aqua
    </div>
</div>

Emmet記法

これはコードを短く書く方法で、省略形を入力するとVS Codeが自動で対応するコードを生成してくれるんだ。

HTMLの場合

説明	Emmet	結果
クラスセレクター	`タグ名.クラス名`	`<div class="box"></div>`
IDセレクター	`タグ名#ID名`	`<div id="app"></div>`
同じ階層のタグ	`div+p`	`<div></div><p></p>`
親子関係のタグ	`div>p`	`<div><p></p></div>`
複数の同じタグ	`span*3`	`<span></span><span></span><span></span>`
コンテンツがあるタグ	`div{内容}`	`<div>内容</div>`

CSSの場合は、単語の頭文字を使うことが多いよ。

h500+w300+bgc はこうなるよ

1
2
3
4
5
div {
    width: 500px;
    height: 300px;
    background-color: #fff;
}