セレクターとカスケード
タイプ、クラス、ID、属性セレクターで要素を選択します。詳細度、継承、カスケードを理解し、どのスタイルが優先されるかを予測します。
「セレクターとカスケード」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
CSSとは
CSS（Cascading Style Sheets）は、視覚的な表示を制御する言語です。ルールを記述し、それぞれのルールには要素を対象にするセレクターと、プロパティと値の組を含む宣言ブロックがあります。
selector {
property: value;
another-property: value;
}type、class、IDセレクター
基本的なセレクターは3種類あります。typeはタグのすべての要素（p）を対象にし、classはクラスを持つ要素（.card）を対象にし、IDはidで1つの要素（#logo）を対象にします。IDは詳細度が非常に高いため、クラスを優先してください。
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */属性セレクターと疑似クラスセレクター
[type="email"]のように、属性値で要素を選択できます。状態には疑似クラスを使用します。:hover、:focus、:active、:checked、:nth-child()、:first-child、:last-childなどがあります。
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }結合子
結合子は要素間の関係を表します。space（子孫）、>（直接の子要素）、+（隣接する兄弟要素）、~（一般の兄弟要素）があります。
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */詳細度：どのルールが優先されるか
複数のルールが同じ要素を対象にする場合、どのルールが優先されるかは詳細度で決まります。IDセレクター（0,1,0,0）はクラスセレクター（0,0,1,0）より優先され、クラスセレクターはtypeセレクター（0,0,0,1）より優先されます。インラインスタイルはすべてに優先されます。!importantは最も強い指定なので、最後の手段として使用してください。
詳細度の計算
ID、クラス・属性・疑似クラス、typeをそれぞれ分けて数えます。列ごとに比較してください。例：#nav .link:hover = (0,1,1,1)。.nav a = (0,0,1,1)。前者が優先されます。
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }カスケード：記述順が重要
詳細度が同じ場合、スタイルシートで後に記述されたルールが優先されます。これがCSSのC、つまりカスケードです。インポートの順序とソースの記述順はどちらも重要です。
継承
一部のCSSプロパティはデフォルトで継承されます。つまり、子要素に値を設定しなくても親要素の値が子要素に適用されます。color、font-family、line-heightなどのテキスト関連のプロパティは継承されます。marginなどのボックスモデル関連のプロパティは継承されません。
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}:is()と:where()セレクター
:is()と:where()を使うと、リスト内のいずれかに一致する簡潔なセレクターを記述できます。違いは、:is()が引数の中で最も高い詳細度を継承するのに対し、:where()は常に詳細度が0になることです。
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}ユニバーサルセレクター *
ユニバーサルセレクター*はすべての要素に一致します。CSSリセットでよく使用されます。*, *::before, *::after { box-sizing: border-box; }とすると、ボックスモデルをはるかに予測しやすくできます。
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}ブラウザーのデフォルトスタイル
ブラウザーは、作成したスタイルシートより前に独自のデフォルトスタイルシート（ユーザーエージェントスタイルシート）を適用します。normalize.cssなどのCSSリセットやCSSレイヤーを使うと、これらのデフォルトを無効化し、既知の基準状態からスタイリングを始められます。
確認問題
最も高い詳細度を持つセレクターはどれですか？
まとめ：セレクターとカスケード
type、class、ID、属性、疑似クラスのセレクターで要素を対象にします。詳細度によって競合を解決します（ID ＞ class ＞ type）。カスケードでは、ソースの記述順によって同じ詳細度の優先順位を決めます。継承によって、テキストスタイルが自動的に子孫要素へ適用されます。
よくある質問
「セレクターとカスケード」レッスンは無料ですか？
はい。「セレクターとカスケード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「セレクターとカスケード」で何を学びますか？
タイプ、クラス、ID、属性セレクターで要素を選択します。詳細度、継承、カスケードを理解し、どのスタイルが優先されるかを予測します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「セレクターとカスケード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。