CSSの属性セレクタ属性値にスタイル設定する（id・class属性に頼らない方法）

タグの各属性や属性値に対して、idやclass属性を付けずにCSSでスタイル設定をする事ができます。

属性値の条件指定や複数属性スタックの機能もあり、コード量の節約・管理のしやすさにつながります。

様々な属性に適用でき、HTML上のインラインスタイルを上書きする事もできます。サイトの検証にも利用できます。

CSSの属性セレクタとは

CSSの属性セレクタには魔法の効果があると個人的には思っています。

設計上存在する様々な問題をクリアにでき、余計なクラス追加を回避する事でタグの省エネに役立ちます。

属性セレクタは一見複雑そうですが、簡単に習得利用ができますので安心して下さい。

本記事では属性セレクタがどのように動作するか、およびそれらの使用方法についてのアイデアを紹介します。

属性・属性値とは

例えばリンクを挿入する際に使用するaタグを例に取りましょう。

<a href="https://lpeg.info/" target="_blank">WEBフリーランスブログ Lpeg</a>

aタグの場合、hrefで「移動するURL」、targetで「リンクの開き方」といった情報を指定して構成しますよね。

ここでのhrefやtargetが「属性」であり、その後に続く=""の中身が「属性値」を示しています。

imgタグならば、srcやwidth・height、altなどが属性であり、=""の中に入ったものが属性値となります。

属性のポイント

属性セレクタのコントロール

例えばaリンクタグのテキスト色を変更する場合、class属性などを付ける人が多いと思います。

しかしclass属性を付けなくても属性セレクタを利用する事でコントロールができます。

最も基本的な仕組みとしては、HTML属性を「大かっこ」で囲んで設定を掛けます。

href属性セレクタ

[href]{ color: #cc0000; }

<a href="index.html">HTML・CSS3関連記事</a>

CSS反映結果

この様に、href（エイチレフと読みます）のテキストリンクの色が#ffcc00になります。

後ろについた「index.html」に関する説明は後述します）。

リンクURLを条件とする設定

[href="index.html"]{ color: #ffcc00; }

CSS反映結果

この場合「index.html」へリンクしているテキストの色は全て、#ffcc00になります。

この様にid属性やclass属性を使わなくても、指定内容によってCSSを制御する事ができるのです。

属性値の指定方法

ではtitle属性を持つすべてのdivタグを例に取って、「属性値の指定方法」をご紹介しましょう。

div[title]{ padding: 20px; background: #f1f1fd; }

<div title="lpeg">lpeg</div>

CSS反映結果

この様にtitle属性があるdivは全て、paddingが20pxで薄いバイオレット色になります。

本サンプルでは、title属性が付く限り基本は上記の様になります。

完全一致

以下はtitleの属性値が"lpeg"となっているdivタグを対象とする場合です。

div[title="lpeg"]{ background: #66cc00; }

<div title="lpeg">aaa</div>

CSS反映結果

この場合title内の値が完全に「lpeg」と一致しているので、緑色になっています。

しかしtitle属性内の値は必ずしもこれに留まらない可能性がありますよね。

その場合はその状況に応じて、部分一致の符号を使う事ができます。

空白入りテキストの完全一致

例えば「lpeg page」など間に空白スペースが入っている場合もあるでしょう。

この場合は等号の前にチルダまたは破線「~」を追加します。

div[title~="lpeg"]{ background: #00eeff; }

/*スペースあり*/ <div title="lpeg page">lpeg page</div> /*スペースなし*/ <div title="contentslpegpage">contentslpegpage</div>

CSS反映結果

このように、スペースが無く連続したテキストでは反映がされません。

文末一致

例えば「contentlpeg」など属性テキストの「文末」と一致させる場合は、符号の前に「$」を追加します。

div[title$="lpeg"]{ background: #ff9900; }

<div title="コンテンツの文末にlpeg">コンテンツの文末にlpeg</div>

CSS反映結果

先頭一致

逆に「lpegcontents」など属性テキストの先頭と一致させる場合は、符号の前に「^」を追加します。

div[title^="lpeg"]{ background: #0033cc; color: #fff; }

<div title="lpegコンテンツ先頭">lpegコンテンツ先頭</div>

CSS反映結果

完全一致の精度を和らげる

例えば「allpegion」などの中にも、読もうとすれば「lpeg」が入っていますよね。

こういった偶然の場合は含まず、「lpeg-data」など明確な意図の属性値は対象に含みたい場合です。

この場合は、符号の前に垂直バー「|」を追加します。

div[title|="lpeg"]{ background: #999999; color: #fff; }

/*含まれない*/ <div title="lpegdata">allpegion</div> /*含まれる*/ <div title="lpeg-data">lpeg-data</div>

CSS反映結果

任意の部分文字列に一致

最後に任意の部分文字列に一致する完全な検索属性演算子をご紹介します。

つまりどのような属性値であろうと「lpeg」が入っていればカウントするタイプですね。

この場合は符号の前に「*」を追加します。

div[title*="lpeg"]{ background: #cc3399; color: #fff; }

<div title="allpeg6ion">allpegion</div>

CSS反映結果

この場合仮に意図していなくても、「lpeg」と並んでいれば対象に含まれます。

その他の利便性

複数属性のスタックが可能

これらの属性セレクタの利便性が高い理由の一つに、スタック可能（複数選択）な所が挙げられます。

「複数の一致する要素」を条件に選択できる訳です。

例えばaタグでtitle属性があり、class属性が「point」で終わるタグを指定する場合は、以下のようになります。

/*大かっこをつなげる*/ span[title][class$="point"]{ background: #0066cc; color: #fff; }

<span class="point" title="大かっこをつなげる">クラス属性が「point」でタイトル属性を持つspanタグ</span>

CSS反映結果

クラス属性が「point」でタイトル属性を持つspanタグ

大文字小文字の区別もできる

フラグを追加して、属性検索で大文字と小文字を区別しないようにする事もできます。

この場合は以下の様にします。

[title*="LPEG" i]{ background: #669900; color: #fff; }

<div title="lpeg">lpeg</div> <div title="LPEG">LPEG</div> <div title="Lpeg">Lpeg</div>

CSS反映結果

こうすれば「lpeg」「LPEG」「Lpeg」その他のすべてのバリエーションに一致させる事ができます。

様々な属性セレクタ

入力タイプ別のスタイル

お問い合わせ入力フォームの中で「メールアドレス」「TEL」など、入力タイプごとにスタイルを変更できます。

input[type="email"] { color: #ff0000; } input[type="tel"] { color: #ff9900; }

電話リンクを表示する

特定のサイズの電話番号を非表示にし、代わりに電話リンクを表示して、電話での通話を簡単にすることができます。

span.phone { display: none; } a[href^="tel"] { display: block; }

内部リンクと外部リンク・httpsの是非

内部リンクと外部リンクを、それぞれ違う装飾で処理する事もできます。

さらにhttpsのリンクとhttpのままリンクとを、それぞれ分ける事ができます。

a[href^="http"]{ color: #3333ff; } a:not([href^="http"]) { color: #996600; } a[href^="http://"]:after { content: url(例えば鍵の解除マーク画像); } a[href^="https://"]:after { content: url(例えば鍵のロック状態の画像); }

アイコンをダウンロード

HTML5ではファイルを開くのではなく、ダウンロードを指示する「ダウンロード属性」があります。

アクセスはして欲しいが、直接開かないように希望するPDFやドキュメントに役立ちます。

また大量のファイルを連続してダウンロードする際のワークフローも簡単になります。

このdownload属性の欠点は、従来のリンクと区別できるような視覚的な違いが用意されてない事です。

ダウンロードリンクである事を示すために、以下の様な工夫を行うことができます。

a[download]:after { content: url(ダウンロードを示すアイコンなどの画像); }

PDFやdocアイコンでファイルの種類を表現

a[href$="pdf"]:after { content: url(images/icon-pdf.png); } a[href$="docx"]:after { content: url(images/icon-doc.png); } a[href$="xls"]:after { content: url(images/icon-xls.png); }

属性セレクタを重ねれば、ダウンロード可能なリンク上にのみアイコンを設定できます。

a[download][href$="pdf"]:after { content: url(images/icon-pdf.png); }

ファイルタイプの表示

ファイル添付に使用可能な「ファイルの種類」は、デフォルトでは表示されません。

<input type="file" accept="pdf,doc"> [accept]:after { content: "【操作可能ファイル】:" attr(accept); }

上記の様にファイルの種類を疑似要素を使用して表示しています。

ほとんどのinputタグではこの疑似要素を実行することはできませんが、ファイル操作では使用する事ができます。

リンクの表示

リンクのURLを表示する際に、属性セレクタを使って表示できるようになりました。

href属性にCSSでafter疑似要素を追加して、content: attr()を使用してURLを表示する事ができます。

a[href]:after { content: "【" attr(href) "】"; }

<a href="https://lpeg.info/">Lpeg</a>

CSS反映結果

タグ上ではLpegの後ろには何も入れていないのですが、上記の様にURLを自動表示する事ができるので便利ですよね。

カスタムツールチップ

ツールチップのカスタマイズは、属性セレクタを使用すれば簡単です。

<p title="カスタムツールチップ">カスタムツールチップ</p>

[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: fff; background-color: #3333cc; display: block; padding: .225em .35em; position: absolute; top: -20px; left: 100px; }

CSS反映結果（マウスオーバーして下さい）

ACCESSKEYS

Webには情報にアクセスするためのさまざまなオプションが提供されています。

accesskeyはマウスの使用に問題がある人用であり通常は使用しませんが、設定する事はできます。

必ずしも下記が唯一のオプションではない事は踏まえておいて下さいね。

a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

直接書かれたスタイルを上書きまたは再適用する

HTML上に直接スタイル設定がされた、いわゆる古いコードを使っているWEBサイトに今だに出くわす事があります。

このコードを一つずつ更新するのは、ページ数が少ないなら問題はないかも知れません。

しかしページ数が大規模になる場合はそれこそ大変な作業になります。

HTMLソース上のスタイル設定を上書き

そんな時は、HTML上で適用されたスタイルを上書き、または再適用する事ができます。

/*上書き*/ div[bgcolor="#000000"] { background-color: #222 !important; } /*再設定*/ div[color="#FFFFFF"] { color: #fff; }

<div bgcolor="#000000" color="#FFFFFF">HTMLソースに直接スタイルが設定されています。</div>

この様にソース上のスタイル設定を上書きて別のものにしたり、改めて設定しなおす事ができます。

こうしておけば、ソース上のスタイルを全て編集する必要はなくなりますね。

特定のインラインスタイルを上書きする

これは上書きするプロパティと値が正確にわかっている場合や、表示場所でのみ適用する場合に最適です。

この例では要素のマージンはピクセル単位で設定されています。

しかしデフォルトのフォントサイズが変更された場合、pxで指定していると幅が狭くなる場合があります。

div[style*="margin: 8px"] { margin: 1em !important; }

<div style="margin: 8px;">インラインスタイル</div>

CSS反映結果

こうする事で、margin: 8px;とインラインスタイルが適用された箇所は全て1emの相対サイズに変わってくれます。

サイト診断オプションとしての利用

これらのオプションはサイトの制作中やローカル環境で修正の必要な問題箇所を特定するのに役立ちます。

コントロールがないオーディオのチェック

audioタグ自体今はあまりまり使用しませんが、使用時にcontrols属性を含めるのを忘れる事がよくあります。

そうすると結果何も表示がされません。

これが原因でオーディオ要素が非表示になっていたり、構文その他の問題で表示されない場合に役立ちます。

※Firefoxでのみ機能します。

audio:not([controls]) { width: 100px; height: 20px; background-color: #ffcc00; display: block; }

代替テキストなし

代替テキストのない画像はページを見ただけでは発見しにくいですが、以下を追加するとすぐに発見できます。

注：境界線が要素の幅に追加され、レイアウトが台無しになる可能性がありますので別のやり方が良いかも知れません。

alt自体が無い img:not([alt]) { outline: 2em solid chartreuse; } altが空 img[alt=""] { outline: 2em solid cadetblue; }

CSS反映結果

非同期Javascriptファイル

JavaScriptが非同期でロードするものとそうでないものを区別・理解することは、ページのパフォーマンスを向上させるのに役立ちます。

script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Javascriptイベント要素

JavaScriptイベント属性を持つ要素を強調表示して、JavaScriptファイルにリファクタリングすることもできます。

ここではOnMouseOver属性に焦点を当てましたが、JavaScriptイベント属性のいずれでも機能します。

[OnMouseOver] { color: #cc0000; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

隠しアイテム

非表示の要素または非表示の入力がどこにあるかを確認する必要がある場合は、次のように表示できます。

[hidden], [type="hidden"] { display: block; }

一押し人気コーナー紹介