コーディング

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

2016.10.24

2017.05.29

ブラインドタッチ

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.

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。