CSSの属性セレクタを使いこなして効率よくコーディングしよう

CSSはセレクタを使いこなすことで効率よくスタイルを指定することができます。使う機会はそれほど多くないですが理解しておくことで非常に便利な属性セレクタを紹介します。

[attr]

「attr」という属性を持っている要素に対してスタイルを指定します。

コーディング例

See the Pen rrPJRL by tetsuro (@tetsuro) on CodePen.

[attr=’aaa’]

「attr」という属性の値が「aaa」の要素に対してスタイルを指定します。

例えば別窓で表示する外部リンクのテキスト色を指定するときに使用します。

コーディング例

See the Pen attr02 by tetsuro (@tetsuro) on CodePen.

[attr^=’aaa’]

「attr」という属性の値が「aaa」で始まる要素に対してスタイルを指定します。

例えば「tit」という文字列で始まる要素に対して文字色を指定するときに使用します。

コーディング例

See the Pen attr03 by tetsuro (@tetsuro) on CodePen.

[attr$=’aaa’]

「attr」という属性の値が「aaa」で終わる要素に対してスタイルを指定します。

例えば「tit」という文字列で終わる要素に対して文字色を指定するときに使用します。

コーディング例

See the Pen attr04 by tetsuro (@tetsuro) on CodePen.

[attr*=’aaa’]

「attr」という属性の値が「aaa」を含む要素に対してスタイルを指定します。

例えば「tit」という文字列を含む要素に対して文字色を指定するときに使用します。

コーディング例

See the Pen attr05 by tetsuro (@tetsuro) on CodePen.