みかおば
📘 CSS初心者のみかおばです！
今回は「セレクタの応用」と「スタイルの優先順位」について学びます💡
複数条件を組み合わせて指定できる複合セレクタや、
スタイルが重なったときにどれが有効になるかを決めるカスケード（優先順位）、
そして最後の切り札 !important について見ていきましょう✨
🧩 複合セレクタとは？
セレクタを組み合わせて使うことで、より細かく指定できます。
/* 要素＋クラス */
p.note {
color: #d63384;
}
/* 親子セレクタ（スペース） */
div p {
font-size: 14px;
}
/* 直接の子要素（>） */
ul > li {
list-style-type: square;
}
/* 同じ行の隣にある要素（+） */
h2 + p {
color: #007bff;
}
💡 複合セレクタを使うと「どこにある要素か」まで指定できる！
🏷 カスケードと優先順位の考え方
CSSは「後から書かれたもの」や「より詳しい指定」が優先されます。
これを カスケード（cascade） と呼びます。
💡 優先順位の基本ルール
- !important が最優先
- インラインスタイル（style属性）
- IDセレクタ（#id）
- クラス・属性・擬似クラス（.class, :hoverなど）
- 要素セレクタ（p, h1など）
- ブラウザの初期設定
/* 例：どちらが優先？ */
p {
color: blue;
}
p.note {
color: red;
}
👉 .note の方が「より具体的」なので赤になります。
🚨 !importantとは？使い方と注意点
どうしても他のスタイルを上書きしたいときに使うのが !important。
p {
color: blue !important;
}
👉 どんな指定よりもこのスタイルが優先されます。
💡 ただし使いすぎ注意！!important が増えると、あとから修正がきかなくなり、
CSS全体が管理しづらくなります⚠️
💻 実際のコード例
HTML部分：
<div class="wrapper">
<h2 class="title">セレクタと優先順位の例</h2>
<p class="note">これはnoteクラスの段落です。</p>
<p>通常の段落です。</p>
</div>
CSS部分：
p {
color: gray;
}
p.note {
color: red;
}
.wrapper p {
color: blue;
}
p.note {
color: green !important;
}
👀 実際の表示結果
「note」クラスの段落は緑色で表示されます。
これは、最後の !important によって他の指定を上書きしたためです💚
⚠️ よくあるミスと注意点
!importantは「最後の手段」。頻繁に使うと管理が難しくなる- セレクタが長く複雑すぎると、後から修正しづらい
- 同じ要素に複数ルールがあるときは「どれが具体的か」「どれが後か」で決まる
✅ ポイントまとめ
🧩 複合セレクタ：複数条件を組み合わせて指定
🏷 カスケード：後から書かれた or 詳しい指定が優先
🚨 !important：最優先されるが、乱用注意！
💡 セレクタの「優先順位」を理解すると、
CSSの“なぜ効かない？”が一気に解決します✨
HTMLやCSSの基礎をもっと学びたい方におすすめ👇
📌 次回予告
【第13回】簡単な実践（カードUIを作ってみよう）
→ これまで学んだプロパティを組み合わせて、背景・余白・枠線・文字装飾を使った「カード風デザイン」に挑戦します🪄
🔖 この回で出てきたプロパティ
コメント