CSS Attribute selectors プロパティ 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
Attribute selectors CSS プロパティとは
トピック：CSS属性セレクタは、指定された属性が存在するかどうかに基づいて要素を選択する、事ができる 特定の属性または属性値を持つHTML要素のスタイルを設定することは可能。アトリビュートセレクタを作成するには、アトリビュートを任意に値とともに大括弧で囲む
属性セレクター
CSSコード：例
/* <a> title属性を持つ要素 */
a[title] {
color: red;
}
/* <a> hrefが一致する要素 "https://webref.eomec.com" */
a[href="https://webref.eomec.com"] {
color: green;
}
/* <a> hrefを含む要素 "webref" */
a[href*="webref"] {
font-size:2em;
}
/* <a> hrefが終わる要素 ".com" */
a[href$=".com"] {
font-style: italic;
}a[href] {
background-color: yellow;
}
[href*="webref"] {
background-color: red;
}HTMLコード：例
サンプル コードを試す<ul>
<li><a href=" #internal">内部リンク</a></li>
<li><a href=" https://webref.eomec.com">リンクの例</a></li>
<li><a href=" #InSensitive">内部リンクの区別なし</a></li>
<li><a href=" https://webref.eomec.com">例 .comリンク</a></li>
</ul>[attribute]attributeという名前の属性を持つ要素を表示することができる。指定された属性を持つ要素を選択するために使用される[attribute=value]attributeという名前の属性の値が正確にvalueである要素を表示することができる。指定された属性値を持つ要素を選択するために使用される[attribute~=value]attributeという名前の属性の値が空白区切りの語のリストで、その中の1つが正確にvalueと一致する要素を表示することができる。指定されたワードを含む属性値を持つ要素を選択するために使用される[attribute|=value]attributeという名前の属性の値が正確に value と一致するか、 valueで始まり直後にハイフン（- (U+002D)）が続く要素を表示する言語のサブコードのマッチに使われる。指定された値から始まる指定された属性を持つ要素を選択するために使用される[attribute^=value]attributeという名前の属性の値がvalueで始まる要素を表示することができる。属性値が指定された値で始まる要素を選択するために使用される。[attribute$=value]attributeという名前の属性の値がvalueで終わる要素を表示することができる。属性値が指定された値で終わる要素を選択するために使用される[attribute*=value]attributeという名前の属性の値が、文字列中にvalueを1つ以上含む要素を表示することができる。属性値が指定された値が含まれている要素を選択するために使用される[attributeoperatorvalue i]- 閉じ角括弧の前に
i（又はI）を追加すると、（ASCIIの範囲内の文字の場合）値は大文字と小文字を区別せずに比較する
サポートするデスクトップ ブラウザ対応・互換性
| Property | Attribute selectors プロパティ 値 | |||||
|---|---|---|---|---|---|---|
| Attribute selectors | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯ 1 | フルサポート◯ 12 | フルサポート◯ 1 | フルサポート◯ 7 | フルサポート◯ 9 | フルサポート◯ 3 |
Case-insensitive modifier (i) | フルサポート◯ 49 | サポートなし✖ | フルサポート◯ 47 | サポートなし✖ | フルサポート◯ 36 | フルサポート◯ 9 |
サポートするモバイル ブラウザ対応・互換性
| Property | Attribute selectors 内容 説明 | ||||||
|---|---|---|---|---|---|---|---|
| Attribute selectors | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯ | フルサポート◯ | フルサポート◯ | フルサポート◯ 4 | フルサポート◯ | フルサポート◯ | フルサポート◯ |
Case-insensitive modifier (i) | フルサポート◯ 49 | フルサポート◯ 49 | サポートなし✖ | フルサポート◯ 47 | フルサポート◯ | フルサポート◯ | フルサポート◯ 5.0 |
