CSS（Cascading Style Sheets）は、ウェブページのデザインを制御するための強力なツールです。しかし、複数のスタイルが適用される場合、どのスタイルが優先されるかを理解することが重要です。この記事では、CSSの優先度（specificity）を上げる方法について詳しく解説します。
セレクタの詳細度を上げる
CSSの優先度は、セレクタの詳細度によって決まります。以下の方法でセレクタの詳細度を上げることができます。
要素セレクタよりもクラスセレクタを使う
/* 要素セレクタ */
div {
color: red;
}
/* クラスセレクタ */
.example {
color: blue;
}クラスセレクタよりもIDセレクタを使う
/* クラスセレクタ */
.example {
color: red;
}
/* IDセレクタ */
#example {
color: blue;
}複数のクラスセレクタを組み合わせる
.class1.class2 {
color: green;
}インラインスタイルを使用する
インラインスタイルは、通常のCSSセレクタよりも高い優先度を持ちます。
<div style="color: green;">Text</div>!important を使用する
!important を使用すると、そのスタイルが最も高い優先度を持つようになります。ただし、他のルールと競合する可能性があるため、乱用は避けるべきです。
.example {
color: red !important;
}より具体的なセレクタを使う
セレクタをより具体的にすることで優先度を上げることができます。
/* 単一クラスセレクタ */
.example {
color: red;
}
/* より具体的なセレクタ */
div.example {
color: blue;
}CSSの読み込み順序を調整する
後から読み込まれるCSSは、前に読み込まれたCSSを上書きします。スタイルシートを読み込む順序を調整することで、優先度を制御できます。
<!-- この順序では、second.cssのスタイルが優先されます -->
<link rel="stylesheet" href="first.css">
<link rel="stylesheet" href="second.css">具体例
以下に、優先度の異なるセレクタを使った具体例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Specificity Example</title>
<style>
/* 要素セレクタ */
p {
color: black;
}
/* クラスセレクタ */
.text {
color: red;
}
/* IDセレクタ */
#special-text {
color: green;
}
/* より具体的なセレクタ */
div .text {
color: blue;
}
/* !important */
.important-text {
color: purple !important;
}
</style>
</head>
<body>
<p class="text">これは普通のテキストです。</p>
<p id="special-text" class="text">これは特別なテキストです。</p>
<p class="important-text">これは最も優先されるテキストです。</p>
</body>
</html>これは普通のテキストです。
これは特別なテキストです。
これは最も優先されるテキストです。
この例では、各テキストに異なるスタイルが適用されます。セレクタの優先度や!importantを使うことで、スタイルの適用順序が変わることを確認できます。
