属性セレクターには、便利は指定方法があるので、みていきましょう。
属性セレクターの便利な指定方法
- 完全一致 → [【属性】=”【値】”]で、【属性】が【値】の要素
- 前方一致 → [【属性】^=”【値】”]で、【属性】が【値】で始まる要素
- 後方一致 → [【属性】$=”【値】”]で、【属性】が【値】で終わる要素
- 部分一致 → [【属性】*=”【値】”]で、【属性】に【値】を含む要素
というように記述します。
それぞれ詳しく例をみてみましょう。
完全一致
<ul>
<li><a href="https://devsakaso.com/category/css/" target="_blank">CSSのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/html/" target="_blank">HTMLのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/javascript/">JavaScriptのカテゴリーページ</a></li>
<li><a href="#top">TOP</a></li>
</ul>[href="https://devsakaso.com/category/css/] { /*完全一致*/
}
前方一致
<ul>
<li><a href="https://devsakaso.com/category/css/" target="_blank">CSSのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/html/" target="_blank">HTMLのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/javascript/">JavaScriptのカテゴリーページ</a></li>
<li><a href="#top">TOP</a></li>
</ul>[href^="https"] {/* 前方一致*/
}
後方一致
<ul>
<li><a href="https://devsakaso.com/category/css/" target="_blank">CSSのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/html/" target="_blank">HTMLのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/javascript/">JavaScriptのカテゴリーページ</a></li>
<li><a href="#top">TOP</a></li>
</ul>[href$="css/"] {/* 後方一致*/
}
部分一致
<ul>
<li><a href="https://devsakaso.com/category/css/" target="_blank">CSSのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/html/" target="_blank">HTMLのカテゴリーページ</a></li>
<li><a href="https://devsakaso.com/category/javascript/">JavaScriptのカテゴリーページ</a></li>
<li><a href="#top">TOP</a></li>
</ul>[href*="category"] {/* 部分一致*/
}