セレクターを検査する
CSS セレクターは、スタイルを適用する要素を選択するために使用されます。 セレクターは、優れた柔軟性とパワーを提供します。 セレクターを使用すると、すべての要素または 1 つの特定の要素、さらには 1 つの特定の文字にスタイルを適用できます。
セレクターには、次の 3 つの主要な種類があります。
- 要素
- クラス
- ID
これらのセレクターを使用すると、数多くの、または少数の要素にスタイルを適用できます。
要素セレクター
要素セレクターは、そのタグを持つすべての要素に適用されます。 任意の HTML 要素を要素セレクターとして使用できます。
h1 を使用すると、ページ上のすべての h1 要素を変更できます。
h1 {
/* style */
}
クラスセレクター
すべての HTML 要素を使用すると、class 属性を追加できます。
class は、要素をグループ化し、CSS 設定を適用するマークを付けるために使用されます。
履歴書を作成するときは、学歴と職歴のセクションがあります。 クラスを使用すると、これらの要素を同じスタイルで書式設定できます。
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
上記の例では、それぞれの div が、同様の種類の情報を表示しているため、同じ書式設定にする必要がある可能性があります。 2 つの div 要素に同じクラスをマークすることで、それぞれに同じ CSS スタイルを適用できます。
CSS でクラスを識別するには、名前の前に . をプレフィックスとして付けます。 この例では、.history を使用します。
.history {
/* your styles */
}
CSS ファイルを使用している場合は、CSS ファイルにクラス スタイル定義を記述します。 HTML のクラス属性は、CSS ファイルから定義を参照します。
擬似クラス
擬似クラスを使用すると、ページ上の位置やユーザーがやり取りしている方法に基づいて、要素を識別できます。
ユーザーが Web ページを操作すると、さまざまな要素の状態が変化します。 あるユーザーが項目の上にマウス ポインターを置いている場合に、マウス ポインターが置かれているものの色を変更したい場合です。 または、ユーザーがリンクを選択した場合。 そのリンクにアクセスした後、スタイルを変更して知らせることができます。 CSS では多くの "擬似クラス" がサポートされています。これは、ユーザーの操作または実行内容に基づいて動的に適用されます。 擬似クラスの先頭には : のプレフィックスが付き、別のセレクターの後に配置されます。
たとえば、ユーザーがカーソルを置いたときにリンクの背景色を黄色に設定するには、次の CSS を使用できます。
a:hover {
background-color: yellow;
}
最も一般的な擬似クラスの一部を次の表に示します。
| 擬似クラス | 説明 |
|---|---|
hover |
ユーザーがアイテムの上にカーソルを置いている |
visited |
以前にクリックされたリンク |
link |
アクセスしていないリンク |
first-child |
階層内でセレクターに一致する最初の子 |
last-child |
階層内でセレクターに一致する最後の子 |
重要
擬似要素と CSS を使用すると、ハイパーリンクから下線を削除できます。 原則として、アクセシビリティの目的で下線を引くのが最善です。 下線付きのテキストを使用すると、ユーザーはページ上のリンクをすばやく識別できます。
ID セレクター
クラスと同様に、ID を使用すると、要素にスタイルを適用できます。 クラスを複数の要素に適用できる一方で、ID は一意であり、1 つの要素のみを参照する必要があります。
履歴書には、X、GitHub、ブログなどのソーシャル メディアのセクションを設ける場合があります。 そのセクションのカスタム スタイルが必要な場合は、ID を設定できます。
<div id="social-media">
<!-- list of links -->
</div>
ID には、CSS 内の # がプレフィックスとして付けられます。
#social-media {
/* style */
}
注
クラスと ID の標準的な名前付け規則は、"串刺しケース" を使用します。各単語は小文字で、- で区切って指定します。 串刺しケースという名前は、単語が串のように表示される様子から来ています。