こんにちは！
UPSTARTSのSベンです！
今回は「属性セレクタ」についてやっていきます。
こちらのhtmlにスタイルをあてていきたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <p> <a href="https://www.google.co.jp/" class="search link"> Google </a> </p> <p> <a href="https://one-piece.com/"> ONE PIECE.com </a> </p> <p> <a href="http://uplog777.com"> UPLOG </a> </p> <p> <a href="next_page.html" title="next"> 次ページ </a> </p> </body> |
目次
属性セレクタとは？
属性セレクタとは、
htmlのタグにnameやclassといった属性を付ける事ができますよね？
その属性に応じてスタイルを適応するといったセレクタになります。
今回は6つのパターンを見ていきたいと思います。
特定の属性があるとき
|
1 2 3 |
a[title] { color: red; } |
この場合、aタグにtitle属性があるとき
といった指定方法になります。
属性が特定の値のとき
|
1 2 3 |
a[href="https://uplog777.com/"] { color: red; } |
この場合はaタグのリンクが、https://uplog777.com/
だったときという指定方法になります。
属性に複数の値が指定されていて、そのうちのどれがが一致するとき
|
1 2 3 |
a[class~="search"] { color: red; } |
この場合はaタグのclass属性の中に、searchがあるときという指定方法になります。
属性が特定の値から始まるとき
|
1 2 3 |
a[href^="https"] { color: red; } |
この場合はaタグのリンクが、httpsから始まるときという指定方法になります。
属性が特定の値で終わるとき
|
1 2 3 |
a[href$=".com"] { color: red; } |
この場合はaタグのリンクが、.comで終わるときという指定方法になります。
属性に特定の値が含まれるとき
|
1 2 3 |
a[href*=".jp"] { color: red; } |
この場合はaタグのリンクに、.jpが含まれるときという指定方法になります。
では今回でセレクタは終了になります。
次回は「疑似クラス」についてです。
ではまた次回！
