CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS属性セレクタで `rel="nofollow"` を持つ要素を選択する方法

CSSの属性セレクタ（Attribute Selector）を使用すると、特定の属性や属性値を持つHTML要素をピンポイントでスタイリングできます。ここでは、rel="nofollow" 属性を持つすべての <a> 要素を選択してスタイルを適用する基本的な方法を解説します。

基本構文：完全一致セレクタ

属性値が完全に一致する要素を選択するには、[attribute="value"] の形式を使用します。

a[rel="nofollow"] {
  border: 3px solid blue;
}

このルールは、rel 属性の値が 정확히 nofollow である <a> 要素にのみ、青色の実線ボーダーを適用します。

実装例

以下のHTMLとCSSを組み合わせると、最初のリンク（nofollowあり）にだけボーダーが表示され、2番目のリンク（noreferrerのみ）には適用されません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性セレクタのデモ</title>
  <style>
    a[rel="nofollow"] {
      border: 3px solid #2196F3;
      padding: 4px 8px;
      border-radius: 4px;
      text-decoration: none;
      color: #333;
    }
  </style>
</head>
<body>
  <p>
    <a href="https://example.com/page-a" rel="nofollow">nofollow 属性あり（スタイル適用）</a>
  </p>
  <p>
    <a href="https://example.com/page-b" rel="noreferrer">noreferrer のみ（スタイル未適用）</a>
  </p>
</body>
</html>

応用：属性セレクタのバリエーション

実務では完全一致以外にも、以下のようなパターンマッチングが頻繁に使われます。

1. 前方一致 ^=

属性値が指定文字列で「始まる」要素を選択。

a[href^="https://"] { /* HTTPSリンクのみ */ }
[class^="btn-"] { /* btn- で始まるクラス */ }

2. 後方一致 $=

属性値が指定文字列で「終わる」要素を選択。

a[href$=".pdf"] { /* PDFファイルへのリンク */ }
img[src$=".png"] { /* PNG画像 */ }

3. 部分一致 *=

属性値のどこかに指定文字列が「含まれる」要素を選択。

a[rel*="nofollow"] { /* nofollow を含むすべて（nofollow ugc 等も対象） */ }
[class*="container"] { /* container を含むクラス */ }

4. 単語単位の一致 ~=

スペース区切りの値リストの中で、指定単語が「完全に一致する」要素を選択（rel や class に最適）。

a[rel~="nofollow"] { /* "nofollow ugc" や "ugc nofollow" もヒット */ }

5. 大文字小文字を区別しない i フラグ

属性値の大文字・小文字を無視してマッチング（モダンブラウザ対応）。

a[rel="nofollow" i] { /* NOFOLLOW, Nofollow, nofollow すべて対象 */ }

実用的なユースケース

  • 外部リンクの視覚化: a[rel~="external"]::after { content: " ↗"; }
  • ダウンロードリンクのアイコン表示: a[href$=".pdf"]::before { content: "📄 "; }
  • セキュリティ属性のチェック: a[target="_blank"]:not([rel~="noopener"]) { outline: 2px solid red; } で rel="noopener" 欠落を検出

ブラウザ対応状況

ここで紹介したすべての属性セレクタは、IE7以上を含むすべてのモダンブラウザでサポートされています（i フラグはIE非対応だが、Edge 12+、Firefox、Chrome、Safariで動作）。安心して本番環境で使用できます。

属性セレクタを活用すれば、クラス名を追加せずにセマンティックなHTML属性だけで柔軟なスタイリングが可能になり、HTMLとCSSの分離・保守性が向上します。

  1. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ