Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

CSSの特異性

特異性とは？

同じ要素を指すCSSルールが2つ以上ある場合、特定性の値が最も高いセレクターが「優先」され、そのスタイル宣言がそのHTML要素に適用されます。

特異性は、要素に最終的に適用されるスタイル宣言を決定するスコア/ランクと考えてください。

次の例を見てください。

例1

この例では、「p」要素をセレクターとして使用し、この要素に赤色を指定しました。テキストは赤になります。

<html> <head>   <style>     p {color: red;}   </style> </head> <body> <p>Hello World!</p> </body> </html>

自分で試してみる»

次に、例2を見てください。

例2

この例では、クラスセレクター("test"という名前)を追加し、このクラスに緑色を指定しました。テキストは緑色になります (要素セレクター"p"に赤色を指定しましたが)。これは、クラスセレクタ-の優先度が高いためです。

<html> <head>   <style>     .test {color: green;}     p {color: red;}   </style> </head> <body> <p class="test">Hello World!</p> </body> </html>

自分で試してみる»

次に、例3を見てください。

例 3

この例では、idセレクター(「demo」という名前) を追加しました。 idセレクターの優先度が高いため、テキストは青色になります。

<html> <head>   <style>     #demo {color: blue;}     .test {color: green;}     p {color: red;}   </style> </head> <body> <p id="demo" class="test">Hello World!</p> </body> </html>

自分で試してみる»

次に、例4を見てください。

例4

この例では、「p」要素にインラインスタイルを追加しました。インラインスタイルが最優先されるため、テキストはピンク色になります。

<html> <head>   <style>     #demo {color: blue;}     .test {color: green;}     p {color: red;}   </style> </head> <body> <p id="demo" class="test" style="color: pink;">Hello World!</p> </body> </html>

自分で試してみる»

特異性の階層

すべてのCSSセレクターは、特異性階層にその場所があります。

セレクターの特異性レベルを定義する4つのカテゴリーがあります。

  1. インラインスタイル- 例：<h1 style="color: pink;">
  2. ID- 例：#navigation-bar
  3. クラス、疑似クラス、属性セレクター- 例: .test, :hover, [href]
  4. 要素と疑似要素- 例: h1, ::before

特異度の計算方法は?

特異度の計算方法を覚えよう！

0から開始し、ID値ごとに100を追加し、クラス値(または疑似クラスまたは属性セレクター)ごとに10を追加し、要素セレクターまたは疑似要素ごとに1を追加します。


注意：インラインスタイルの特異度は1000で、常に最優先されます。

注意2:このルールには例外が1つあります。!importantルールを使用すると、インラインスタイルもオーバーライドされます。

以下の表は、特異度の値を計算する方法の例をいくつか示しています。


セレクタ

特異度値

計算
p 1 1
p.test 11 1 + 10
p#demo 101 1 + 100
<p style="color: pink;"> 1000 1000
＃demo 100 100
.test 10 10
p.test1.test2 21 1 + 10 + 10
#navbar p#demo 201 100 + 1 + 100
* 0 0(ユニバーサルセレクターは無視されます)

特異度の値が最も高いセレクターが勝利し、有効になります!

次の 3 つのコード部分を考えてみましょう。

例

A: h1 B: h1#content C: <h1 id="content" style="color: pink;">見出し</h1>

Aの特異性は1(要素セレクター1つ)、Bの特異性は101(idセレクター1つ + 要素セレクター1つ)、Cの特異性は1000(インラインスタイル)

3番目のルール(C)の特異度値が最も高い(1000)ため、このスタイル宣言が適用されます。

より詳細なルールの例

等しい特異性: 最新のルールが優先されます- 同じルールが外部スタイルシートに2回書き込まれた場合、最新のルールが優先されます。

例

h1 {background-color: yellow;} h1 {background-color: red;}

自分で試してみる»

idセレクターは属性セレクターよりも特異性が高い- 次の3つのコードを見てください。

例

div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;}

[自分で試してみる»]https://techis.jp/guide/tryit/549){.techis-btn}

最初のルールは他の2つよりも詳細性が高いため、適用されます。

コンテキストセレクターは、単一の要素セレクターよりも詳細性が高いです -埋め込まれたスタイルシートは、スタイル設定される要素で最も優先されます。したがって、次の状況では

例

<strong>外部CSSファイル内</strong> #content h1 {background-color: red;} <strong>HTMLファイル内</strong> <style> #content h1 {background-color: yellow;} </style>

後者のルールが適用されます。

クラスセレクターは、任意の数の要素セレクターに勝ります。- .intro などのクラス セレクターは、h1、p、div などに優先します。

例

.intro {background-color: yellow;} h1 {background-color: red;}

自分で試してみる»

ユニバーサルセレクター(*)と継承された値の特異性は0です- ユニバーサルセレクター(*)と継承された値は無視されます。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル