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

CSSの[属性=値]セレクターとは？指定した属性を持つ要素を選択する方法

CSSの[属性=値]セレクターの基本

CSSの[属性="値"]セレクターを使用すると、指定した属性とその値を両方持つ要素だけを選択し、スタイルを適用することができます。属性セレクターの中でも最もよく使われる形式の一つで、特定の条件に合致する要素をピンポイントで装飾したい場合に非常に便利です。

以下のサンプルコードでは、属性として rel を取り上げ、値が nofollow であるリンク要素のみにスタイルを適用しています。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         a[rel = nofollow] {
            border: 3px solid orange;
         }
      </style>
   </head>
   <body>
      <a href = "https://qries.com/What-is-Uber-s-business-model-and-how-does-it-compare-with-Ola-s-model-in-India" rel="nofollow">Uber's Business Model</a><br><br>
      <a href = "https://www.qries.com/How-does-share-market-work-in-India" rel="noreferrer">Share Market</a>
   </body>
</html>

実行結果のポイント

このコードを実行すると、1つ目のリンク（rel="nofollow" が設定されているもの）には幅3pxのオレンジ色の枠線が表示されます。一方、2つ目のリンクは rel 属性の値が noreferrer となっているため、セレクターの条件に合致せず、枠線は適用されません。

使いどころの例

このセレクターは、次のような場面で活躍します。

  • SEO対策として rel="nofollow" の外部リンクに視覚的な目印を付けたい場合
  • type="text" や type="submit" など、フォーム部品を種類ごとに装飾したい場合
  • 特定の言語やファイル形式を示す属性値を持つ要素だけを強調表示したい場合

なお、属性値は引用符で囲む書き方（a[rel="nofollow"]）が推奨されます。値に空白や特殊文字が含まれる場合でも正しく動作し、コードの可読性も向上します。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white