IDセレクター
Coddyの「CSSセレクター」コースのレッスン 5/15。
IDセレクターは、特定のID属性を持つ要素を選択するCSSセレクターの一種です。ID属性は、HTML要素を一意に識別するために追加できるカスタム属性です。
特定のIDを持つ要素を選択するには、ハッシュ(#)記号の後にID値を続けて使用します。例えば、セレクター #my-id は、IDが my-id である要素を選択します。
以下は、IDセレクターを使用してウェブページをスタイリングする方法の例です:
#my-id {
color: red;
font-size: 2em;
}要素にIDを追加するには、次のように記述します:
<div id="my-id"></div>クラスセレクターと同様に、このCSSルールはIDが my-id である要素のスタイルを赤色にし、フォントサイズを2emに設定します。
チャレンジ
簡単IDセレクターの理解度を確認するための演習です:
- 2つの
div要素を持つウェブページを作成してください。 - 最初の
div要素にIDmy-idを指定してください。 - IDセレクターを使用して、IDが
my-idのdiv要素のスタイルを、黒以外の好きな色に設定し、フォントサイズを 30px にしてください。
自分で試してみよう
<html>
<head>
<title>ID Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>