CSS属性セレクタとは？初心者向け使い方＆実例まとめ【^・$・完全解説】

6

Views

CSS属性セレクタの使い方

HTMLタグの属性を条件にスタイルを指定できる「CSS属性セレクタ」。クラス名やIDだけでは実現しにくい柔軟な指定ができるため、実務でも非常に役立つテクニックです。この記事では、CSS属性セレクタの基本構文から、よく使うパターン、実践例までをやさしく解説します。

目次

属性セレクタの基本構文

CSS属性セレクタは、HTMLの属性をもとにスタイルを適用するセレクタです。構文は以下のようになります。

要素[属性名="値"] {
  /* スタイル */
}

たとえば、<a target="_blank"> のようなリンクだけにスタイルを当てたいときに便利です。

よく使う5つの属性セレクタ

属性セレクタには、目的に応じて5種類の指定方法があります。

  • [attr]：属性がある要素すべて
  • [attr="value"]：値が完全一致する要素
  • [attr^="value"]：値が「指定の文字列で始まる」要素
  • [attr$="value"]：値が「指定の文字列で終わる」要素
  • [attr*="value"]：値が「指定の文字列を含む」要素

使用例と具体的な使い方

target属性を持つリンクにだけスタイルを適用

a[target] {
  color: red;
  text-decoration: underline;
}

target属性を持つすべてのリンクに赤い文字色を適用します。

画像URLが特定のパスで始まる場合

img[src^="https://example.com/uploads/"] {
  border-radius: 8px;
}

特定フォルダ内の画像だけに丸みをつける例です。

.pdfで終わるリンクだけアイコン表示

a[href$=".pdf"] {
  background: url("pdf-icon.png") no-repeat left center;
  padding-left: 20px;
}

PDFリンクだけにPDFアイコンを表示します。

Twitterを含むリンクに色をつける

a[href*="twitter.com"] {
  color: #1DA1F2;
}

リンク先に”twitter.com”を含む場合、青色のリンクにします。

応用：idが「toc-」で始まる見出しに余白を追加

WordPressの目次機能などで、idがtoc-0やtoc-1のように付与された見出しにスクロール時の余白を追加する例です。

h2[id^="toc-"] {
  scroll-margin-top: 80px;
}

固定ヘッダーに見出しが隠れないようにするためのテクニックです。

初心者が気をつけたいポイント

  • 属性の綴りミスに注意：正しくても指定が効かないときは属性名や値を再確認
  • 属性値の動的変化に注意：JavaScriptで動的に変わる属性には即時反映されないことも
  • クラス・IDと併用可能：属性セレクタとクラス名の併用で、より限定的な指定が可能

おわりに

CSS属性セレクタを活用すれば、要素の属性によって柔軟にスタイルを指定できます。IDやクラスだけに頼らない設計ができるので、コードもスッキリ保てます。Web制作に慣れてきたら、ぜひ活用してみてください。

次回は、フォーム要素への属性セレクタ活用術や、JavaScriptと連携したスタイル制御なども紹介予定です。

関連記事