CSSの特異性
CSSの特異性の概念は、ちょっとした早口言葉であるだけでなく（3倍速く言ってみてください！）、ちょっとしたマインドベンダーになることもあります。これは、CSSで理解するのが難しい概念の1つです。この記事では、特異性の意味、計算方法、セレクターのランキングによってページに表示されるスタイルがどのように決定されるかについて説明します。だから心配しないでください！あなたはすぐに特異性の専門家になります。
「特異性」とはどういう意味ですか？
CSSの特異性とは、基本的にセレクターの重要性を指します。各セレクターには、タイプに応じて固有性が割り当てられます。セレクターの数が多いほど、セレクターはより具体的になり、CSSのその特定のブロックがスタイリング戦争に勝つ可能性が高くなります。
特異性は4つの数字で表され、それぞれがコンマで区切られています。
Selector specificity = 0, 0, 0, 0
カンマを含まない4つの数字の文字列（つまり、0000、0101、1001など）として特異性を見ると、高い 数は、より具体的です です。
ランク別のセレクターの特異性（低–高）：
ランクに基づいてさまざまなタイプの要素を見ていきましょう。
- ＊
ユニバーサルセレクター。特異性は0、0、0、0です。通常、これらはスタイルシートの上部に表示されます。重要度の点でランクが最も低いです。ほとんど何でもそれをオーバーライドするか、ユニバーサルセレクターCSSに追加します。
- ＞、➕、‘‘、〜
タイプセレクターまたはクラスセレクターの子の兄弟を選択するときに通常見られるコンビネータは、特異性に影響を与えず、総数にはカウントされません。否定疑似クラス（：not）も、この特異性カテゴリーに当てはまります。
- div、form、ul、liなど
これらはタイプです セレクター。これらのセレクターには、HTMLでタグと見なされる可能性のあるものがほぼすべて含まれています。特異性の重みは0、0、0、1です。複数のタイプセレクターがコンビネーターで区切られている場合は、セレクターを一緒に追加します。
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
div li {} ⇐ the specificity is 0,0,0,2
div li p {} ⇐ the specificity is 0,0,0,3 - .main-container、.navbar、[type =” text”]、：hover
次に具体性を示すのは、クラス、属性、および疑似クラスのセレクターです。
クラスセレクターは、先頭にドット（“。”）で示されます。属性セレクターには、タイプセレクターの横の角括弧内に属性があります。疑似クラスセレクターは、より具体的なスタイルを必要とする特別な要素のために予約されています。これらの特異性は0、0、1、0です。
div.navlink a {} – 1つのクラスセレクターと1つのタイプセレクターがあるため、特異性は0、0、1、1です。
div.header li.list-item-disc button[type="submit"] {} – 3つのタイプセレクターと2つのクラスセレクター+1つの属性セレクターがあるため、特異性は0、0、3、3です。属性セレクターをオフにすると、特異性は0、0、2、3になります。23は33未満であるため、0、0、3、3の特異性を持つCSSセレクターは、より高い特異性を持っているため、勝ちます。
- ＃blue、＃hiddenなど
IDセレクターは、CSSセレクターの中で最も高い特異性を持っています：1、0、0、0。ID属性定義の固有の性質のため、通常、CSSでIDを呼び出すときに本当に特定の要素をスタイル設定しています。
div#orange {} –タイプセレクターとIDセレクターがあるため、特異性は1、0、0、1です。次のうち、私たちの特異性のルールに従って、どのスタイルが勝ちますか？
div#orange {
background-color: orange;
}
div.square {
background-color: green;
width: 150px;
height: 150px;
} - 最初のdivにはタイプセレクターとIDセレクターがあり、全体的な特異性は1、0、0、1になります。
- 2番目のdivにはタイプセレクターとクラスセレクターがあり、全体的な特異性は0、0、1、1になります。
1001は11より大きいため、CSSのカスケードの性質とは異なり、最初のdivが優先され、背景色はオレンジ色になります。
- インラインスタイル
インラインスタイリングはこれらすべてにどのように適合しますか？さらに IDセレクターよりも固有です。インラインスタイルは、CSSファイル内のほぼすべてのものよりも優先されます。特異性の観点から最も高い重みが付けられています。
-
!importantルール
!important キーワードはすべてに勝る。これは最も具体的であり、CSSによって設定された以前のルールを上書きします。
練習
以下のコードエディタで、ランダムなクラス名とID名を使用してサンプルコンテナのページを作成しました。他のすべてのdivが同じ色のままで、CSSスキルを使用して特定の要素を別の色に変更する練習をしてください。これらのルールをCSSでどのように記述しますか？特定の要素をターゲットにするために使用する必要がある場合、最高の特異性を得るために何を使用しますか。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Specificity</title>
<style>
body {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
main {
width: 100%;
height: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
div {
text-align: center;
}
*.square {
/* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis? */
height: 150px;
width: 150px;
background-color: black;
color: white;
margin: 20px;
}
div.flex {
/* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
*/
display: flex;
justify-content: center;
align-items: center;
}
div#red {
/* why does this one win out? What is the specificity of this div? */
background-color: darkred;
}
#red {
/* What would happen if we took the 'div' out of the previous selector? Which one wins? */
background-color: red;
}
main > div {
font-size: 55px;
font-weight: bold;
}
div#self-align {
/* What happens here? */
align-self: center;
}
</style>
</head>
<body>
<main>
<div id="self-align" class="square flex">1</div>
<div class="square flex">2</div>
<div class="square flex">3</div>
<div class="square flex">4</div>
<div class="square flex">5</div>
<div id="red" class="square flex">6</div>
<div class="square flex">7</div>
<div class="square flex">8</div>
<div class="square flex">9</div>
<div class="square flex">10</div>
<div class="square flex">11</div>
<div class="square flex">12</div>
</main>
</body>
</html> 結論
この記事では、CSSの特異性について説明しました。具体的には、どのセレクターが他のセレクターよりも特異的であるか、そして実際の特異性の数をどのように把握するかについて説明しました。最初の読み飛ばしですぐに届かない場合でも、がっかりしないでください。これは消化すべき多くの情報です。それを維持し、あなたはそれをすぐに手に入れるでしょう！
-
CSSFlexbox
CSS Flexboxモデルは、確立されたCSSボックスモデルを改善するために作成されました。 Flexboxモデルには、Boxモデルの主要な要素（マージン、パディング、境界線、コンテンツ）が引き続き含まれていますが、コンテナ/親の子でスペースを最適に埋める柔軟性を提供します。 このチュートリアルは、フレックスボックスモジュールを少しよく理解するのに役立ち、サイトの応答性を高めることができます。 以下は、基本的なフレックスボックスモデルのデモンストレーションのスターターコードです。フレックスボックスについて説明するときは、それに従ってください。 <!DOCTYPE html
-
CSSシェイプ
さあ、楽しいCSSシェイプを作成しましょう！すべてのコードについては、私のCodepenに従ってください。これをやってみましょう。 長方形と正方形 すべての形状はdivでラップされます。デフォルトでは、divは幅と高さのプロパティに応じて正方形または長方形であるため、最も基本的な形状は正方形と長方形です。したがって、正方形の幅と高さは同じですが、長方形はそうではありません： .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height: