【CSS】属性セレクタの使い方を学び、動的なコンテンツに対応する!

W3C Recommendationを見たことがあるでしょうか。
僕もめったに見ることはありません。

そんな中、今日は属性セレクタについてTipsを少々。

参考:Selectors Level 3

属性セレクタとは

W3C Recommendationの6.3 Attribute selectorsに説明があります。

Selectors allow the representation of an element’s attributes. When a selector is used as an expression to match against an element, attribute selectors must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.

です。なるほどさっぱりです。
ちなみにGoogle翻訳によると、

セレクタは、要素の属性の表現を可能にする。セレクタが要素と照合する式として使用される場合、セレクタはその要素は属性セレクタによって表される属性に一致する属性を持つ場合、要素に一致するように考慮されなければならない属性。

もっとわからなくなる始末でした。

さて、属性といえば、
<a href="http://hogehoge.com"></a>
hrefのことを言います。

そして、http://hogehoge.comがその値(value)です。

属性セレクタの指定方法

E[att^=val]

まず先頭指定の方法です。
a[href^="http://"] などですね。これの場合、http://なので外部へのリンクのみに反応するセレクタとして活用できます。
※ 内部のリンクもhttp://にしたらだめです。

E[att$=val]

これは上記の末尾指定版です。.pngとか、.pdfとかにすることでファイル別で指定できます。

E[att*=val]

これは含まれていればです。aiueoを指定した場合、http://unitopi.com/aiueo/sample.ongなどに有効になります。

動的なコンテンツにぴったり

例ではhrefの値でどうか、というサンプルを書きましたが、どんな属性でも構いません。titlesrc、オリジナルで使っているオレオレ属性でも構いません。
クラスをどんどん作って汎用性をなくすのでなく、属性に応じて一部変更するCSSとして綺麗に使うことができるとベストですね。

まとめ

CSSのセレクタは他にも様々で、:focusなどのユーザーアクション擬似クラス:first-childなどの構造擬似クラスなどがあります。
使えるかどうかでコーディングスピード、コードの美しさを左右するので勉強して損はありませんね!

フォローして続編をチェック

@universionsをフォロー