1. 属性セレクタの種類
CSSの属性セレクタを使うと、id、class、name、typeなどのような属性値をもとにHTML要素を選択できるよ。このセレクタは、フォーム要素やリンクなどユニークな属性を持つ要素をスタイルするときに特に便利だよ。この講義では、さまざまなタイプの属性セレクタとその使い方を解説するね。
属性セレクタは、属性の存在確認、特定の値、または値の一部に基づいて要素を選択するためのカテゴリに分けられるんだ。主な属性セレクタの種類は次のとおりだよ：
- 属性セレクタ: 属性の値に関係なく、特定の属性を含む要素を選択する。
- 特定の値を持つ属性セレクタ: 指定された値を持つ属性を持つ要素を選択する。
- 特定の接頭辞を持つ属性セレクタ: 属性値が指定された接頭辞で始まる要素を選択する。
- 特定の接尾辞を持つ属性セレクタ: 属性値が特定の接尾辞で終わる要素を選択する。
- 特定の文字列を含む属性セレクタ: 属性値に指定された文字列を含む要素を選択する。
- スペースで区切られた属性セレクタ: 属性値に含まれる特定の単語を、スペースで区切って選択する。
- ハイフンで区切られた属性セレクタ: 属性値に含まれる特定の単語を、ハイフンで区切って選択する。
2. 属性セレクタ (Attribute Selector)
属性セレクタは、属性の値に関係なく、特定の属性を持つ要素を選択するんだ。このセレクタは、特定の属性を持つすべての要素を選択したいときに便利だよ。
input[type] {
border: 1px solid black;
}
<input type="text">
<input type="password">
<input type="email">
<input>
この例では、すべての<input>要素でtype属性を持っているものには、属性値に関係なく黒い枠線が設定されるよ。
3. 特定の値を持つ属性セレクタ
特定の値を持つ属性セレクタは、指定された値を持つ属性を持つ要素を選択するんだ。例えば、すべてのテキストフィールドや新しいタブで開くリンクなど、特定の値を持つ要素を選択する場面で便利だよ。
input[type="text"] {
background-color: #f0f0f0;
}
<input type="text">
<input type="password">
<input type="email">
ここでは、テキストフィールド<input type="text">にだけ、薄い灰色の背景色が設定されるよ。
4. 特定の接頭辞を持つ属性セレクタ
特定の接頭辞を持つ属性セレクタは、属性値が特定の接頭辞で始まる要素を選択する。接頭辞は^=の後に指定するんだ。このセレクタは、特定のサイトにリンクしているすべてのリンクを選択する場合に役立つよ。
a[href^="https://example.com"] {
color: green;
}
<a href="https://example.com/page1">example.comへのリンク</a>
<a href="https://another.com">別のリンク</a>
"https://example.com"で始まるリンクは、最初のリンクだけなので、それが緑色で表示されるよ。
5. 特定の接尾辞を持つ属性セレクタ
特定の接尾辞を持つ属性セレクタは、属性値が特定の接尾辞で終わる要素を選択する。接尾辞は$=の後に指定する。このセレクタは、特定の形式のファイル（例えば.png形式の画像）を選択する場合に便利だよ。
img[src$=".png"] {
border: 2px solid blue;
}
<img src="image1.png" alt="画像1">
<img src="image2.jpg" alt="画像2">
ここでは、拡張子が.pngの画像だけに青い枠線が適用されるよ。
6. 特定の文字列を含む属性セレクタ
特定の文字列を含む属性セレクタは、属性値に指定された文字列を含む要素を選択するんだ。文字列は*=の後に指定する。このセレクタは、特定のセクションにリンクしているリンクを選択するときに便利だよ。
a[href*="section"] {
font-weight: bold;
}
<a href="https://example.com/section1">セクション1へのリンク</a>
<a href="https://example.com/about">会社情報</a>
<a href="https://example.com/section2">セクション2へのリンク</a>
"section"を含むhrefを持つリンクだけが太字で表示されるよ。
7. スペース区切りの属性セレクタ
スペース区切りの属性セレクタは、属性値の中にスペースで区切られた指定の語を含む要素を選択するんだ。このセレクタには~=という記号を使う。 複数の値がスペースで区切って入っている属性——たとえば特定のクラスを持つ要素——を選ぶときによく使われるよ。
[class~="featured"] {
background-color: yellow;
}
<div class="featured item">クラス"featured"を持つ要素</div>
<div class="item">ふつうの要素</div>
<div class="highlight featured">クラス"featured"を持つ別の要素</div>
ここでは、クラスのリストにfeaturedを含む要素だけが黄色い背景になる。
8. ハイフン区切りの属性セレクタ
ハイフン区切りの属性セレクタは、属性値が指定の値で始まっていて、そのあとにハイフンで続きが付いていてもよい要素を選択する。 |=という記号は、値が指定のものと一致するか、それにハイフンが続く形で始まる要素を選ぶのに使うんだ。
[lang|="en"] {
color: blue;
}
<p lang="en">英語のテキスト</p>
<p lang="en-us">英語のテキスト（アメリカ英語）</p>
<p lang="fr">フランス語のテキスト</p>
ここで青くなるのは、lang属性が"en"のものか、"en-"で始まるもの（たとえば"en-us"）だけだよ。
9. いろいろな属性セレクタを使った例
下に、さまざまな属性セレクタの使い方を示したHTMLとCSSの例を挙げるね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS属性セレクタの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="テキストフィールド">
<input type="password" placeholder="パスワード">
<input type="email" placeholder="Email">
<a href="https://example.com/page1">example.comへのリンク</a>
<a href="https://example.com/section2">セクションへのリンク</a>
<img src="image.png" alt="PNG画像">
<img src="photo.jpg" alt="JPG画像">
<div class="featured item">クラス"featured"を持つ要素</div>
<div class="item">ふつうの要素</div>
<div class="highlight featured">クラス"featured"を持つ別の要素</div>
<p lang="en">英語のテキスト</p>
<p lang="en-us">アメリカ英語のテキスト</p>
<p lang="fr">フランス語のテキスト</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS属性セレクタの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="テキストフィールド">
<input type="password" placeholder="パスワード">
<input type="email" placeholder="Email">
<a href="https://example.com/page1">example.comへのリンク</a>
<a href="https://example.com/section2">セクションへのリンク</a>
<img src="image.png" alt="PNG画像">
<img src="photo.jpg" alt="JPG画像">
<div class="featured item">クラス"featured"を持つ要素</div>
<div class="item">ふつうの要素</div>
<div class="highlight featured">クラス"featured"を持つ別の要素</div>
<p lang="en">英語のテキスト</p>
<p lang="en-us">アメリカ英語のテキスト</p>
<p lang="fr">フランス語のテキスト</p>
</body>
</html>
/* 属性セレクタ */
input[type] {
border: 1px solid black;
}
/* 特定の値を持つ属性セレクタ */
input[type="text"] {
background-color: #f0f0f0;
}
/* 特定の接頭辞を持つ属性セレクタ */
a[href^="https://example.com"] {
color: green;
}
/* 特定の接尾辞を持つ属性セレクタ */
img[src$=".png"] {
border: 2px solid blue;
}
/* 特定の文字列を含む属性セレクタ */
a[href*="section"] {
font-weight: bold;
}
/* スペース区切りの属性セレクタ */
[class~="featured"] {
background-color: yellow;
}
/* ハイフン区切りの属性セレクタ */
[lang|="en"] {
color: blue;
}
GO TO FULL VERSION