CSSの特異性の意味とそれが重要である理由を学ぶ
要素が、同じプロパティに影響を与える異なるセレクターを持つ複数のルールのターゲットになっている場合はどうなりますか?
たとえば、この要素について話しましょう。
<p class="dog-name">Roger</p>
私たちは持てる
.dog-name {
color: yellow;
}
とターゲットとする別のルールp
、色を別の値に設定します。
p {
color: red;
}
そして、ターゲットとする別のルールp.dog-name
。どのルールが他のルールよりも優先されますか、またその理由は何ですか?
特異性を入力します。より具体的なルールが勝ちます。 2つ以上のルールに同じ特異性、最後に表示されたものが勝ちます。
実際には、より具体的なことは、初心者にとって少し混乱することがあります。また、これらのルールを頻繁に見ない、または単に見落としている専門家にとっても混乱を招くと思います。
特異性の計算方法
特異性は、規則を使用して計算されます。
4つのスロットがあり、それぞれが0から始まります。0 0 0 0
。左側のスロットが最も重要で、右端のスロットが最も重要ではありません。
10進法の数値で機能するように:1 0 0 0
より高い0 1 0 0
。
Slot 1
最初のスロット、右端のスロットは最も重要ではありません。
この値は、タイプセレクター。タイプはタグ名です。ルールに複数のタイプセレクターがある場合は、それに応じてこのスロットに格納されている値をインクリメントします。
例:
p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */
Slot 2
2番目のスロットは3つインクリメントされます。
- クラスセレクター
- 疑似クラスセレクター
- 属性セレクター
ルールがそれらのいずれかを満たすたびに、右から2番目の列の値をインクリメントします。
例:
.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */
もちろん、スロット2セレクターはスロット1セレクターと組み合わせることができます。
div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */
クラスの優れたトリックの1つは、同じクラスを繰り返して特異性を高めることができることです。例えば:
.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */
Slot 3
スロット3には、CSSファイルのCSSの特異性に影響を与える可能性のある最も重要なものが含まれています。id
。
すべての要素はid
属性が割り当てられ、スタイルシートでそれを使用して要素をターゲットにできます。
例:
#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */
Slot 4
スロット4はインラインスタイルの影響を受けます。インラインスタイルは、外部CSSファイルまたは内部で定義されたルールよりも優先されます。style
ページヘッダーのタグ。
例:
<p style="color: red">Test</p> /* 1 0 0 0 */
CSSの他のルールで色が定義されている場合でも、このインラインスタイルルールが適用されます。 1つの場合を除いて-もし!important
is used, which fills the slot 5.
重要性
ルールがで終わる場合、特異性は重要ではありません!important
:
p {
font-size: 20px !important;
}
そのルールは、より具体的なルールよりも優先されます
追加!important
CSSルールでは、特異性ルールに従って、そのルールが他のどのルールよりも重要になります。別のルールを優先できる唯一の方法は、!important
同様に、そして他のそれほど重要でないスロットでより高い特異性を持っています。
チップ
一般に、必要な量の特異性を使用する必要がありますが、それ以上は使用しないでください。このようにして、他のセレクターを作成して、前のルールで設定されたルールを気が狂うことなく上書きできます。
!important
CSSが提供する非常に議論の多いツールです。多くのCSS専門家は、それを使用することに反対しています。特にいくつかのスタイルを試すときにそれを使用していることに気付き、CSSルールは非常に特異性が高いので使用する必要があります!important
ブラウザに新しいCSSを適用させるため。
しかし、一般的に、!important
CSSファイルに場所を置くべきではありません。
を使用してid
CSSのスタイルへの属性も非常に高い特異性を持っているため、多くの議論があります。代わりに、特異性の低いクラスを使用することをお勧めします。クラスは操作が簡単で、より強力です(要素に複数のクラスを設定でき、クラスは複数回再利用できます)。
特異性を計算するためのツール
あなたはサイトを使用することができますhttps://specificity.keegan.st/特異度の計算を自動的に実行します。
それは素晴らしいフィードバックツールになる可能性があるので、物事を理解しようとしている場合は特に便利です。
私の無料ダウンロードCSSハンドブック
その他のCSSチュートリアル:
- Flexboxガイド
- CSSグリッドチュートリアル
- CSS変数(カスタムプロパティ)
- PostCSSの概要
- CSSマージンプロパティ
- CSSで要素を中央揃えにする方法
- CSSシステムフォント
- HTMLをスタイルで印刷する方法
- CSSトランジションの入門ガイド
- CSSアニメーションチュートリアル
- CSSの紹介
- CSSガイド
- PurgeCSSとPostCSSでTailwindを設定する方法
- 追い風チートシート
- CSSを使用して画像を連続的に回転させる方法
- CSSを使用してテーブルをレスポンシブにする
- 二等分してCSSをデバッグする方法
- CSSセレクター
- CSSカスケード
- CSSの特異性
- CSS属性セレクター
- CSSカラー
- CSSユニット
- CSS url()
- CSSタイポグラフィ
- CSSボックスモデル
- CSS位置プロパティ
- CSSメディアクエリとレスポンシブデザイン
- CSS機能クエリ
- CSS変換
- CSSを使用してリストのスタイルを設定する方法
- CSSベンダープレフィックス
- CSSの継承
- CSS疑似クラス
- CSS疑似要素
- CSSを使用したHTMLテーブルのスタイリング
- CSSDisplayプロパティ
- CSS calc()関数
- CSSボーダー
- @importを使用してCSSファイルをインポートする
- CSSエラー処理
- CSSフィルター
- CSSボックスのサイズ設定
- CSSの背景
- CSSコメント
- CSSフォント
- CSSパディング
- CSSのfloatプロパティとクリア
- CSSの正規化
- CSSz-indexプロパティ
- CSSを使用してテキスト選択を無効にする方法
- CSSを使用してコンテナの下部にアイテムを配置する方法
- CSSを使用して色を反転する方法
- CSSのレスポンシブプレタグ
- レスポンシブYouTubeビデオ埋め込み
- レスポンシブデザインに適したCSSブレークポイント値は何ですか?
- フレックスボックスの中心を揃える方法