属性セレクタは、HTML要素の属性値を指定してスタイルを適用するCSSのセレクタです。
CSS3からは正規表現を用いた属性セレクタが利用できるようになり、属性値の完全一致や部分一致などでCSSスタイルを記述することが可能になりました。
この記事では属性セレクタの使い方についてまとめています。
属性セレクタの一覧
| 属性セレクタ | 構文の説明 |
|---|---|
| [属性名] | 指定した属性名を持つ要素 |
| [属性名="属性値"] | 指定した属性名の値が完全一致する要素 |
| [属性名~="属性値"] | 属性値の中にスペース区切りで含まれる場合 |
| [属性名|="属性値"] | 指定した属性値が先頭またはハイフン(-)で区切られた単語の一部分にある場合 |
| [属性名^="属性値"] | 属性値が指定した文字列で始まる場合：前方一致 |
| [属性名$="属性値"] | 属性値が指定した文字列で終わる場合：後方一致 |
| [属性名*="属性値"] | 属性値に指定した文字列が含まれる場合：部分一致 |
| [属性名][属性名="属性値"] | 属性条件を複数指定した場合 |
属性セレクタは上記のように[]（角かっこ・ブラケット）で囲んで記述します。
一つずつ詳しくみていきます。
[属性名]
[属性名]は指定した属性名を持つ要素を選択します。
以下のように記述します。
/* class属性があるdivを選択している */
div[class]{
color:red;
}class属性があるdivにスタイルが適用されますが、class属性がないdivには適用されません。
[属性名="属性値"]
属性名の値が完全一致する要素を選択します。
問い合わせフォームなどでチェックボックスだけにスタイルを指定したい場合は以下のように設定します。
input[type="checkbox"]{
}フォームのチェックボックスのスタイルを変更してみた例
input[type="checkbox"]でチェックボックスを選択して、チェックボックスを丸いスタイルに変えています。
See the Pen 属性セレクタ by mixtaro (@mixtaro) on CodePen.
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
box-shadow: inset 0 0 0 2px #ddd;
background-color: #fff;
transition: all 0.3s ease;
}
input[type="checkbox"]:checked {
background-color: #007bff;
box-shadow: inset 0 0 0 2px #007bff;
}
input[type="checkbox"]:checked::before {
content: 'check';
font-family:'Material Symbols Outlined';
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
font-size: 14px;
}[属性名~="属性値"]
~（チルダ）を使って属性値を指定した場合、指定された属性値を含む単語が、属性値の中にスペース区切りで含まれる場合にマッチします。
以下のように複数classを指定しているコードの場合、
<p class="example class1 class2">属性セレクタの例です。</p>class1が部分的に含まれている要素を指定したい場合は以下のような属性セレクタを記述します。
[class~="class1"]{ color:red; }[属性名|="属性値"]
主にlang属性で利用されることが多いです。
<p lang="en-US">Hello!</p>
<p lang="en-GB">Hi!</p>
<p lang="fr-FR">Bonjour!</p>
<p lang="ja">こんにちは！</p>[lang|="en"]とすると、en-US と en-GBがマッチします。日本語の場合は言語コードを指定する必要がないのマッチしません。
[属性名^="属性値"]
指定された属性値で始まる属性を持つ要素を選択することができます。いわゆる前方一致ですね。
See the Pen CSS footerを常に下部に固定する スマホ用ナビ by mixtaro (@mixtaro) on CodePen.
以下のようにli要素にnav-で始まるclassをつけています。
<ul class="menu">
<li class="nav-menu"><a href="#">MENU</a></li>
<li class="nav-home"><a href="#">HOME</a></li>
<li class="nav-profile"><a href="#">会社案内</a></li>
<li class="nav-location"><a href="#">アクセス</a></li>
<li class="nav-contact"><a href="#">お問い合わせ</a></li>
<li class="nav-search"><a href="#">検索</a></li>
<li class="nav-pagetop"><a href="#">TOP</a></li>
</ul>それぞれのリンクに別々のアイコンを指定したい場合、以下のように属性セレクタを使って書くことができます。
.menu li[class^=nav-] a::before {
font-family: "Material Symbols Outlined";
font-size: 20px;
}
.nav-menu a::before {
content: "menu";
}
.nav-home a::before {
content: "home";
}
....続く[属性名$="属性値"]
指定した属性値が指定した値で終わる要素を選択することができる後方一致の書き方です。
<a href="https://example.com/">example</a>a[href$=".com/"]{
/* リンク先が.com/で終わるリンクにスタイルを適用する */
}リンク先が.com/で終わるリンクにスタイルを適用することができます。
またファイルの種類によって、スタイルを変えたり、別々のアイコンを表示させたりしたい場合は
<a href="https://example.com/report.pdf">PDF レポート</a>
<a href="https://example.com/document.docx">Word書類</a>
<a href="https://example.com/presentation.pptx">プレゼン書類</a>以下のように指定することができます。
a[href$=".pdf"] {
/* PDFファイルのリンクに適用するスタイル */
}
a[href$=".docx"] {
/* Wordファイルのリンクに適用するスタイル */
}
a[href$=".pptx"] {
/* パワポファイルのリンクに適用するスタイル */
}[属性名*="属性値"]
[属性名*="属性値"]は、指定した属性に含まれる部分文字列と完全に一致する値を持つ要素を選択することができます。
[class*="btn"]{
/* クラス名にbtnを含むすべての要素 */
}
[href*="google"]{
/* href属性にgoogleを含むすべてのリンク */
}
[src*=".jpg"]{
/* src属性に.jpgを含むすべての画像 */
}
[id*="main"]{
/* id属性にmainを含むすべての要素 */
}
[name*="user"]{
/* name属性にuserを含むすべてのフォーム要素 */
}以上、属性セレクタとその利用例をまとめました。属性セレクタを使うとHTMLコード内で属性に特定の値を持つ要素を一括して選択できます。
たとえば、クラス名を使わずに、特定の画像ファイル名が含まれる画像要素に対してスタイルを適用したい場合に便利です。
また、正規表現を使うことができるため、特定の文字列が含まれるすべての要素を選択することができます。
このように、属性セレクタを使用することで、HTMLコードをより簡潔・効率的に書くことができます。さらに、HTMLコードの構造が変わっても、属性値が一致する要素にスタイルを適用することができるため、柔軟性が高くなります。
ぜひ属性セレクタを活用してサイトコーディングを効率化してみて下さい。
覚えておくと便利なCSS 隣接セレクタの使い方と使用例についてもまとめています。
-
覚えておくと便利なCSS 隣接セレクタの使い方と使用例
隣接セレクタとは、同じ階層で指定した要素の直後にある要素（同じ階層なので兄弟要素）だけを選択することができるCSSセレクタです。 例えば、見出しの後にある段落だけにマージンを設定したり、リストの最初の ...
続きを見る
擬似クラスについてのまとめはこちら
-
nth-childの使い方・要素の範囲や特定の要素を指定する方法
nth-childは親要素の中で何番目の子要素かによってスタイルを変えることができるCSSの疑似クラスです。nth-child擬似クラスを使えば、リスト、テーブルデザイン、複数カラムをデザインする時に ...
続きを見る
