属性の値に応じて要素を選択できる属性セレクターについて見ていきます。

属性セレクター
完全一致
前方一致
後方一致
部分一致

属性セレクター

・属性セレクターについて見ていきましょう。これは属性の値に応じて要素を選択できる属性セレクターで検索して該当するものにスタイルをつけることもできます。

・今回は複数のリンクを使ってどのように使っていくのかを見ていきたいと思います。aタグを使ってリンクを作っていき複数欲しいのでリスト化しておきましょう。

・まず属性セレクターには[](角括弧)を使っていきます。この中に属性名を書いていくことによってその属性を含む要素に対してスタイリングをしていきます。

・例えば[href]としてあげるとhref属性のついた要素全体に対して任意のスタイルをすることができます。

完全一致

・属性の選択もポイントをもっと狭めることができます。例えば完全に一致した場合にスタイルを付けたい場合があります。そういった場合は値まで指定してあげることによって特定の属性だけをスタイリングすることができます。

・例えばトップに戻るボタンを作った場合href="#top”と属性を指定するのでセレクターは[href="#top”]と指定してあげればトップに戻るボタンだけをスタイリングすることができます。

前方一致

・同様に前方が一致している属性に関してページ内から検索をしてスタイリングを適応させる方法も用意されています。

・その場合^のマークを使ってあげると前方一致を指定することができます。例えばブログのパーマリンクを後半だけナンバリングするように設定してそのurlがついているリンクだけを指定したい場合は[href^="teatree-blog.com”]というように書いてあげればいいでしょう。このときhrefのあとに^のマークを付けてあげます。