「CSS」属性セレクター(selector)を利用するサンプル

2014年1月27日2020年10月14日

説明
CSS の属性セレクター(attr selector)は、指定された属性が存在するかどうかや、
その値に基づいて要素を選択します。

1.[attr^=value]
名前attr属性の値がvalue で始まる要素
使用例
a[href^="#"] {
color: green;
}
<a href="#top">top linkク</a>

2.[attr*=value]
名前attr 属性の値が value を1つ以上含む要素
使用例
a[href*="game"] {
color: red;
}
<a href="https://arkgame.com">arkgame</a>

3.[attr$=value]
名前attr 属性の値が value で終わる要素
使用例
a[href$=".net"] {
color: red;
}
<a href="http://sample.net">arkgame</a>