今回は属性セレクターについて解説していきたいと思います。
結構便利に機能しますのでこの際におぼえちゃいましょう！
それではいってみましょう(*^▽^)/
Menu
属性を持つ要素
要素名[属性名]｛スタイルプロパティ}；
a要素のtitle属性を持つものを赤の文字にする例
1 2 3 4 | /* 属性を持つ要素 要素名[属性名] */ a[title] { color: red; } |
See the Pen QWEYZRP by tomoy777 (@tomboy777) on CodePen.
属性値を持つ要素
要素名[属性名=”属性値”]｛スタイルプロパティ}；
a要素のtarget=”_blank”属性値を持つものを赤の文字にする例
1 2 3 4 | /* 属性値を持つ要素 要素名[属性名="属性値"] */ a[target="_blank"]{ color: red; } |
See the Pen oNLmaKe by tomoy777 (@tomboy777) on CodePen.
属性値の先頭が一致する要素
要素名[属性名^=”属性値”]｛スタイルプロパティ}；
a要素のhref属性値の先頭の文字がhttpsと一致したら赤の文字にする例
1 2 3 4 | /* 属性値先頭一致 要素名[属性名^="属性値"] */ a[href^="https"] { color: red; } |
See the Pen gOMqQYj by tomoy777 (@tomboy777) on CodePen.
属性値の最後が一致する要素
要素名[属性名$=”属性値”]｛スタイルプロパティ}；
a要素のhref属性値の最後の文字が.comと一致したら赤の文字にする例
1 2 3 4 | /* 属性値最後が一致 */ a[href$=".com"] { color: red; } |
See the Pen pobGQvo by tomoy777 (@tomboy777) on CodePen.
属性値を含む要素
要素名[属性名*=”属性値”]｛スタイルプロパティ}；
a要素のhref属性値にgoogleが含まれていたら赤の文字にする例
1 2 3 4 | /* 属性値含む文字 */ a[href*="google"] { color: red; } |
See the Pen qBNgQOX by tomoy777 (@tomboy777) on CodePen.
ではない要素（否定）not
要素名:not([ ])｛スタイルプロパティ}；
a要素のhref属性値にgoogleが含まれてなかったら赤の文字にする例
1 2 3 4 | /* ではない要素（否定）not */ a:not([href^="google"]){ color:red; } |
See the Pen abZXQNJ by tomoy777 (@tomboy777) on CodePen.
まとめ
頭の片隅でいいので、このような属性操作もあるということを認識しておけば、今後なにかの役に立つかもしれませんね！
以上です。
