CSSセレクタは、ウェブページの特定の部分に「おしゃれ」をするための道具です。タグ、クラス、IDの3つが基本的な道具です。これらを使って、文字の色や大きさなどを変えられます。
タグセレクタ
何に使う？
- HTMLのタグ（例：
<p>、<h1>）に直接スタイルを適用します。 - そのタグがページ内で使われるたびに、指定したスタイルが適用されます。
例
p {
color: green;
}この例では、このページみたいにすべてのタグ（段落）に緑色の文字色が適用されます。
クラスセレクタ
何に使う？
- クラスセレクタは、特定のクラス属性を持つ要素にスタイルを適用します。
- 同じスタイルを複数の要素に再利用したい時に便利です。
例
HTML
<p class="highlight">注目されるべきテキスト</p>CSS
.highlight {
background-color: yellow;
}この例では、.highlightクラスが適用された要素（この場合は<p>タグ）の背景色を黄色にします。
注目されるべきテキスト
IDセレクタ
何に使う？
- ページ内で一度だけ使用されるユニークな要素にスタイルを適用します。
- IDセレクタは、ページ内で唯一無二の要素を指定する時に使います。
例
HTML
<p id="special">とても特別なテキスト</p>CSS
#special {
font-size: 20px;
}この例では、#specialIDを持つ要素（この場合は<p>タグ）のフォントサイズを20ピクセルにします。
とても特別なテキスト
カスケーディングについて
CSSの「カスケーディング」とは、複数のスタイルがある要素に適用される場合、どのスタイルが優先されるかを決めるルールのことです。基本的には、より具体的なセレクタが優先されます（IDセレクタがクラスセレクタより、クラスセレクタがタグセレクタより具体的です）。また、同じレベルのセレクタで競合がある場合は、スタイルシート内の後のルールが優先されます。
まとめ
タグセレクタは「みんな」に、クラスセレクタは「グループ」に、IDセレクタは「一人だけ」に特別なおしゃれをします。この3つの道具を使いこなせば、あなたのウェブページももっと素敵になりますよ！
コメント