TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から6年以上経過しているため正確ではないかもしれません

属性セレクタや疑似要素を使って無駄なタグやクラスの付与などを減らす

リンクが別ウインドウの場合は別窓のアイコンを付けたいとか、ダウンロードリンクで拡張子ごとにアイコンを付けたいとかそういった時どうしますか?

クラスをつけるというのも手ですが、プロパティ(属性)の内容で判断して記述するという方法があります。

実際どういうものかというと下記のようなことです。

See the Pen 属性セレクタや疑似要素を使う by Nobuyuki Kondo (@artprojectteam) on CodePen.0

HTMLのプロパティをCSSでは属性セレクタといいE[foo]もしくはE[foo=bar]で指定することができます。
条件にマッチする属性セレクタに対して疑似要素(::before/::afterなど)を使うことで、HTML側を汚染させずにより幅広い表現をすることができます。

属性セレクタについてはMDN:属性セレクタを見ると詳しく書かれています。

属性セレクタを使うメリット

最大のメリットはHTML側にクラスなどを記述する必要がない。
たとえば、外部リンクなどでいちいち外部リンクのクラスを付与するよりE[target="_blank"]とかE[href^="http"]などで指定したほうがHTML側のコード量が減るので余計な手間(手動なり自動なりにしても)が減ります。

また、CSSでも属性セレクタはHTMLのタグ内のプロパティの何を条件にしているのかが視覚的にわかりやすいので理解しやすい。

乱用は厳禁

何でもかんでも属性セレクタや疑似要素にすればいいというものではありません。
SEOやアクセシビリティの観点からも基本的には装飾に関することだけに留めておくほうがよい。

属性セレクタを利用する場合は、実現させる内容が存在しなくても影響ないかどうかで判断すべき。

アイコン画像などはそれがなかったからと言って影響はないが、テキストを扱う場合は要注意。
そのテキストがないと文章として成り立たないのであれば利用は避ける方が良い。