cssにおけるスタイルの優先度

cssのスタイルの優先度についてしっかり理解していなかったので 改めて調べて試したものを記載していきます。

1.基本の優先順位

まずは以下のようなHTLMにcssを付けます

HTML

<p class="first">何が優先されるか</p>

CSS

.first {
    color : blue;
    color : red;
}

これは下に記述してある方が優先されます

2.タイプセレクタとclassセレクタ

ではタイプセレクタとclassセレクタではどちらの方が優先されるかといいますと

HTML

<p class="first">何が優先されるか</p>

CSS

.first {
    color:red;
}

p {
    color : blue;
}

classセレクタの方が優先されます

3.classセレクタと要素を特定したclassセレクタ

classセレクタと要素を特定したclassセレクタではどうなるでしょうか

CSS

p.first {
    color : orange;
}
.first{
  color: blue;
}

要素を特定したclassセレクタが優先されます。

3.親要素と一緒に指定すると

今度は親要素がある時にどうなるか見てみます。 要素を特定したclassセレクタと親要素＋タイプセレクタを比較します。

HTML

    <div class="first">
    <p id="second" class="third">何が優先されるか</p>

    </div>

CSS

p.third {
    color : orange;
}
.first p {
  color: blue;
}

要素を特定したclassセレクタと 親要素＋タイプセレクタでは親要素＋タイプセレクタが優先されます

4.idセレクタとclassセレクタ

idセレクタとclassセレクタではどちらが優先されるでしょうか

HTML

    <div class="first">
    <p id="second" class="third">何が優先されるか</p>

    </div>

CSS

.third {
  color : red;
}
#second {
  color : green;
}

idの方が優先されるようです。

5.idセレクタとclassセレクタと親要素

親要素＋タイプセレクタとidセレクタとclassセレクタがある時はどうなるのでしょうか。

CSS

.third {
  color : red;
}
#second {
  color : green;
}
.first p {
  color: blue;
}

ということで idセレクタが優先されます

6. 要素を特定したidセレクタとidセレクタ

最後に要素を特定したidセレクタとidセレクタを比べてみます

CSS

#second {
  color : green;
}
p#second {
    color : yellow;
}

要素を特定したidセレクタが優先されます

7.まとめ

優先度についてまとめますと

要素を特定したidセレクタ > idセレクタ > 親要素＋タイプセレクタ > 要素を特定したclassセレクタ > classセレクタ > タイプセレクタ

となります。