CSSでID、クラス、および属性セレクターを使用してHTML要素を選択する方法

投稿日: 2022-04-20 2022-08-04
タグ: css, Development

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

CSSセレクターを作成するには、ほとんどの場合、条件を設定し、その条件を満たすHTML内の要素をtrueとして検索する必要があります。これは、要素セレクターを使用して大まかに行うことができ、高レベルのタグを選択できますが、選択した要素をより細かく制御するために、HTMLで特定の識別子を作成し、CSSに適用できます。

このチュートリアルでは、 id, class、および意図的に記述されたHTMLへのスコープスタイルへの属性セレクター。まず、チュートリアル全体で編集するHTMLファイルとCSSファイルを作成します。次に、追加します id 属性とそれらを使用する id ターゲットスタイルへの値。また、追加します class 要素に属性を付け、それらのクラス値を個別に、または一緒に使用して、より具体的で再利用可能なスタイルを作成します。最後に、属性セレクターを使用して、より具体的なシナリオに一致するスタイルを作成します。 id また class セレクターだけで達成できます。

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
ローカルマシンに次のように保存された空のHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

で作業を開始するには id, class、および属性セレクターでは、最初に、チュートリアルの残りの部分で作業するHTMLおよびCSSコードを設定します。このセクションでは、レイアウトを処理して視覚的な美学を開始するために必要なすべてのHTMLといくつかの初期CSSスタイルを書き出します。

開始するには、 index.html テキストエディタで。次に、次のHTMLをファイルに追加します。

index.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

次に、 <head> タグを付けて追加します <meta> HTMLファイルの文字セットを定義するタグ。次に、 <meta> モバイルデバイスがページをレンダリングする方法を定義するタグ、ページのタイトルを設定し、最後に、後で作成するCSSファイルをロードします。 <link> 鬼ごっこ。

これらの追加は、次のコードブロックで強調表示されています。コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About CSS Selectors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

追加した後 <head> コンテンツ、に移動します <body> CSSセレクターについて説明しているページのコンテンツを追加する要素。このコードブロックから強調表示されたセクションを index.html テキストエディタのファイル：

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Using CSS Selectors</h1>
    </header>

    <main>
      <section>
        <h2>Selecting HTML To Style</h2>
        <p>Selecting the right element and providing the right visual styles is the basis of <a href="https://do.co/community">writing CSS</a> code. Whenever you need to adjust how an element on a webpage looks, using selectors is key.</p>
        <p><a href="https://example.com">Read this to learn more about selectors</a></p>
      </section>

      <section>
        <h2>The Type Selector</h2>
        <p>The type selector finds elements on the page by tag name. This is a common way to style elements on the page. Type selectors are often referred to as element selectors.</p>
      </section>
  
      <section>
        <h2>Combining Selectors</h2>
        <p>A combinator selector is defined by a space character between selectors, with the HTML ancestry reading left to right. The right-most selector is the intended target. This can be as complex or as simple as necessary to <em>scope</em>, or provide sufficient specificity, to the intended element.</p>
      </section>
    </main>
  </body>
</html>

変更をに保存します index.html テキストエディタで開いたままにします。ブラウザを開いてロードします index.html ブラウザのデフォルトスタイルでページのコンテンツをレンダリングします。次の画像は、白地に黒のセリフテキストを使用したこれらのデフォルトスタイルを示しています。

次に、テキストエディタに戻り、というファイルを作成します styles.css. これは、で参照したファイルです。 <head> あなたの要素 index.html. の中に styles.css ファイルに、次のコードを追加します。

styles.css

body {
  font-family: sans-serif;
  line-height: 1.5;
  color: #444;
}

このCSSは body タイプセレクターでデフォルトを設定 font-family ブラウザのページへ sans-serif フォント。次に、テキストの行間の間隔を1.5倍に変更します。 font-size. 最後に、 color valueは、テキストをデフォルトの黒ではなく、濃い灰色に変更します。

これらの変更をに保存します styles.css 次の画像に示すように、ブラウザに戻ってこれらの変更がどのように表示されるかを確認します。

これで、開始点が設定されました。 index.html そしてあなたの styles.css. 次のセクションでは、 id HTMLの要素に属性を付けて作成します id これらの要素にスタイルを適用するためのCSSのセレクター。

IDセレクターの使用

このセクションでは、 id 属性とその目的、次にいくつかを追加します id HTMLの属性。最後に、これらのいくつかを使用します id レイアウトスタイルを適用するためのセレクター。

The id 属性は、ページ上のコンテンツをリンクする一意の識別子です。たとえば、Webページのコンテンツの途中に要素があり、 id の属性 my-id. それを追加することによって id ポンドまたはハッシュ記号を含む値（#）などのURLに http://example.com/index.html#my-id、ブラウザはページのそのセクションにスクロールします。これはURLの一部として、および他のスクリプトの目的で使用できるため、それぞれ id ページの値は一意である必要があります。

での作業を開始するには id 属性、開く index.html テキストエディタで。まず、 <header> 要素とそれに与える id の値を持つ属性 header. 次に、に移動します <main> 要素とそれに与える id 値が content. これらは id 属性は、コンテンツの2つの主要なセクションに一意の識別子を提供します。次のコードブロックで強調表示されている追加は、 index.html ファイル：

index.html

...
<header id="header">
  ...
</header>
<main id="content">
  ...
</main>
...

適切に記述されたHTMLには1つしかないことに注意してください <header> 要素と1つ <main> 要素であるため、すでに一意である要素に一意のIDを割り当てるのは冗長に見える場合があります。ただし、このような特定のIDを適用すると、スタイルをHTML構造から分離できるため、基になるHTMLが変更された場合でも、IDに関連付けられた一貫したスタイルを維持できます。

変更をに保存してください index.html 続行する前に。

The id CSSのセレクターは、URLで参照される場合と同じ形式を使用します。つまり、ポンド記号の後に名前が続きます。 id、そのような #my-id. 使用を開始するには id セレクター、開く styles.css テキストエディタで。次に、2つを追加します id あなたからの属性値 index.html グループコンビネータとして #header, #content. このセレクターを使用して、 <header> そしてその <main> ページの中央に均一に要素。次のコードブロックには、セレクターブロックとこのレイアウトに必要なコードが含まれています。

styles.css

body {
  font-family: sans-serif;
  line-height: 1.5;
  color: #444;
}

#header,
#content {
  margin: 1em auto;
  width: 90%;
  max-width: 60ch;
}

The id セレクターは margin の 1em 両方の上部と下部に <header> そしてその <main> エレメント。 The auto の値 margin プロパティは、とペアリングされたときにコンテンツをページの中央に保持します width のプロパティ 90%. 最後に、 max-width プロパティは、両方のコンテナが次のサイズに達すると、それ以上大きくなるのを防ぎます。 60ch、これは60に相当します 0 幅の文字。

変更をに保存します styles.css 次に開きます index.html ブラウザで。ページのコンテンツは、ウィンドウの長さ全体に広がるのではなく、ページの中央に配置されるようになりました。次の画像は、これがブラウザにどのように表示されるかを示しています。

このセクションでは、 id 属性を作成し、この属性を使用して要素にスタイルを適用しました。また、 id 属性は、ブラウザがURLやスクリプトで使用する方法のため、一意の値を持つ必要があります。次に、 class このセクションのコードをリファクタリングして、新しいクラスのコンテンツに色を適用する属性。

クラスセレクターの使用

このセクションでは、 class で見つかった値を使用してページ上の特定の要素を見つけるためのセレクター class HTML属性。リファクタリングします id 再利用可能なセレクターを使用する class 代わりは。 The class 属性は、スタイルを適用できる特定のターゲット可能な値を作成することを目的としています。とは異なり id、の値 class 属性は再利用できます。これは、 id セレクタ。

要素のスタイリングを開始するには class、を開くことから始めます index.html テキストエディタでファイルします。両方で <header> と <main> 要素、追加 class 値が content-width. 次のコードブロックの強調表示されたセクションは、追加する方法を示しています class 属性：

index.html

...
<header id="header" class="content-width">
  ...
</header>
<main id="content" class="content-width">
  ...
</main>
...

変更をに保存します index.html、次に開きます styles.css テキストエディタで、このクラス値のクラスセレクタを作成します。

The class セレクターはに似ています id CSSには特殊文字があり、ピリオド記号（.). の中に styles.css ファイルで、IDを使用してセレクターを見つけます #header, #content 両方のセレクターを .content-width クラスセレクター。次の強調表示されたコードは、コードに加える変更を示しています。

styles.css

body {
  font-family: sans-serif;
  line-height: 1.5;
  color: #444;
}

.content-width {
  margin: 1em auto;
  width: 90%;
  max-width: 60ch;
}

これらの変更をあなたに保存します styles.css ブラウザに戻ります。更新 index.html スタイルは変更されません。コードへのリファクタリングはスタイルを変更しませんでしたが、要素の選択方法を変更しました。の汎用性 class スタイルは複数回、さまざまな要素タイプで使用できるということです。

次に、に戻ります index.html テキストエディタで、 class に属性 <h1> の値を持つ要素 style-1. これは、CSSで使用されるクラス名を定義します。次のコードブロックは、強調表示されたセクションでこの変更を示しています。

index.html

...
<header id="header" class="content-width">
  <h1 class="style-1">Using CSS Selectors</h1>
</header>
...

次に、それぞれについて <h2> 内の要素 <main> 要素、追加 class 属性。これらの3つすべてを与える class の値を属性 style-2. 次のコードブロックの強調表示されたセクションを参照用に使用します。

index.html

...
<main id="content" class="content-width">
  <section> 
    <h2 class="style-2">Selecting HTML To Style</h2>
    ...
  </section>

  <section>
    <h2 class="style-2">The Type Selector</h2>
    ...
  </section>
  
  <section>
    <h2 class="style-2">Combining Selectors</h2>
    ...
  </section>
</main>
...

追加した後 class の要素の属性 index.html ファイル、必ず変更を保存してください。次に、開きます styles.css テキストエディタで、のクラスセレクタを作成します style-1 クラス。

の最後に追加 styles.css と呼ばれるセレクター .style-1. ピリオドは、ブラウザに次の名前のページでクラス属性を探すように指示します。 style-1. 次に、セレクターブロックを作成し、 font-size の値を持つプロパティ 1.25rem、 text-transform プロパティをに設定 uppercase、および letter-spacing 置くプロパティ 0.125em 文字間のスペース。次のコードブロックは、強調表示されたセクションでのこれらの追加を示しています。

styles.css

...
.content-width {
  margin: 1em auto;
  width: 90%;
  max-width: 60ch;
}
.style-1 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

次に、別のクラスセレクターを作成します。 style-2 クラス。クラス値の名前の前に必ずピリオドを追加してください。次に、そのセレクターに font-size とプロパティ 2rem 値と font-weight プロパティをに設定 normal. 次のコードブロックで強調表示されたコードを参照します。

styles.css

...
.style-1 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

.style-2 {
  font-size: 2rem;
  font-weight: normal;
}

変更をに保存します styles.css 更新します index.html ブラウザのファイル。 The <h1> コンテンツは小さくなり、大文字になりますが、 <h2> コンテンツは少し大きくなり、太字ではなくなります。次のスクリーンショットは、これらの変更がブラウザにどのように表示されるかを示しています。

クラスは、ページ上の任意の要素に再利用および適用できるため、強力なセレクターです。これは、どこでどのように交換できるかを意味します style-1 と style-2 クラスが使用され、CSSに変更を加える必要はありません。

この変更を行うには、 index.html を変更します class 属性値 style-1 に <h1> 要素に style-2. その後、変更します style-2 の値 <h2> 要素」 class に属性 style-1. これらの変更については、次のコードブロックの強調表示されたセクションを参照してください。

index.html

...
<header id="header" class="content-width">
  <h1 class="style-2">Using CSS Selectors</h1>
</header>

<main id="content" class="content-width">
  <section> 
    <h2 class="style-1">Selecting HTML To Style</h2>
    ...
  </section>

  <section>
    <h2 class="style-1">The Type Selector</h2>
    ...
  </section>
  
  <section>
    <h2 class="style-1">Combining Selectors</h2>
    ...
  </section>
</main>
...

これらの変更をに保存します styles.css、ブラウザに戻り、リロードします index.html. の大きい、通常のフォントの太さ style-2 のコンテンツに適用されるようになりました <h1> 要素、およびの短い大文字のスタイル style-1 今セクションに適用します <h2> 要素。次の画像は、これがブラウザにどのように表示されるかを示しています。

このセクションでは、 class リファクタリングするセレクター id 前のセクションのセレクター。また、2つの新しいを作成しました class フォントスタイルをに適用するセレクター <h1> と <h2> 見出し要素とあなたはそれらを交換しました class どの要素がどのスタイルを受け取ったかを変更するための属性値。次のセクションでは、HTML要素に複数のクラスを適用してクラスセレクターの操作を続けます。

クラスセレクターの組み合わせ

このセクションでは、複数を適用します class 複数のCSSのスタイルを組み合わせるための同じHTML要素への値 class セレクタ。の利点 class 以上 id 前のセクションで示したように、はその再利用性です。 class セレクターを組み合わせて、より具体的な要素をターゲットにすることもできます。 The class セレクターは、要素の検索とスタイルの適用におけるこの多様性と特異性のために最も一般的で好ましいCSSセレクターです。

開始するには、 styles.css テキストエディタでファイルします。次に、3つの新しいクラスセレクターを追加します。 .color-1, .color-2、と .color-3. これらの3つのセレクターのそれぞれに color 同様のプロパティ HSL 色相スペクトルで50の増分で異なる値。これにより、HTMLの要素に適用できるカラーパレットが提供されます。 CSSファイルに何を追加するかについては、次のコードブロックの強調表示された部分を参照してください。

styles.css

...
.style-2 {
  font-size: 2rem;
  font-weight: normal;
}

.color-1 {
  color: hsl(300, 70%, 40%);
}

.color-2 {
  color: hsl(250, 70%, 40%);
}

.color-3 {
  color: hsl(200, 70%, 40%);
}

変更をに保存します styles.css、次に開きます index.html テキストエディタで。次に、3つのそれぞれに色を追加します <h2> の要素 <main> ブロック。はじめて <h2>、後にスペースを追加します style-1 次に追加します color-1. の各値の間のスペース class 属性は追加を示します class CSSから参照できる名前。他の人にも同じことをしてください <h2> 使用する以外の要素 color-2 2番目の値 <h2> と color-3 3番目のために <h2>.

次のコードブロックの強調表示された部分は、追加のクラス値をフォーマットする方法を示しています。

index.html

...
<main id="content" class="content-width">
  <section> 
    <h2 class="style-1 color-1">Selecting HTML To Style</h2>
    ...
  </section>

  <section>
    <h2 class="style-1 color-2">The Type Selector</h2>
    ...
  </section>
  
  <section>
    <h2 class="style-1 color-3">Combining Selectors</h2>
    ...
  </section>
</main>
...

変更をに保存します index.html、ブラウザに戻り、ページを更新します。 3つ <h2> セクションの見出しは同じフォントスタイルを保持しますが、それぞれの色が異なります。次の画像は、これがブラウザにどのように表示されるかを示しています。

同じように class 値はHTMLで一緒に使用できます。 class 名前を組み合わせて、HTMLに存在する可能性のあるより具体的な状況を作成することもできます。 CSSでクラス名をチェーン化することにより、両方のクラスを持つ要素を同時に選択できます。

たとえば、CSSセレクター .color-1.color-2 HTMLを持つ要素のみを選択します class 両方を含む値 color-1 と color-2.

複数を使用してみるには class セレクターの名前、開く styles.css テキストエディタで。を組み合わせた新しいセレクターを作成します color-1 クラスと color-2 クラス。この組み合わせの目的は、定義されたものの中間の色を適用することです color これらの各クラスの値。

次の強調表示されたセクションをCSSファイルに追加します。

styles.css

...
.color-3 {
  color: hsl(200, 70%, 40%);
}

.color-1.color-2 {
  color: hsl(275, 70%, 40%);
}

.color-2.color-3 {
  color: hsl(225, 70%, 40%);
}

このコードブロックでは、 color 結合されたクラスセレクターのプロパティ .color1.color-2 に hsl(275, 70%, 40%)、それは300の値の中間であるため .color-1 との250の値 .color-2. それからあなたは組み合わせるために同じことをしました .color-2 と .color-3.

変更をに保存してください styles.css、次に移動します index.html テキストエディタで、次のコードブロックで強調表示された変更を行います。

index.html

...
<main id="content" class="content-width">
  <section> 
    <h2 class="style-1 color-1 color-2">Selecting HTML To Style</h2>
    ...
  </section>
  ...
  <section>
    <h2 class="style-1 color-3 color-2">Combining Selectors</h2>
    ...
  </section>
</main>
...

結合されたクラスセレクターに対して宣言した新しいスタイルは、個々のクラスごとに設定されたスタイルよりも優先されることに注意してください。これは、結合されたクラスセレクターが、個々のクラスセレクターよりも具体的な要素を選択しているためです。たとえば、あなたが書いたルール .color-1 を持っているHTML要素を探しています color-1 そのクラスの1つとして。 The .color-1.color-2 ルールは両方を持つHTML要素を探しています color-1 と color-2 そのクラスのリストにあります。 2番目のルールは最初のルールのサブセットであるため、より具体的であると言え、最初のルールをオーバーライドします。

作成した2つの結合されたクラスCSSルールでは、両方のルールが適用される可能性がある状況があります。たとえば、 class の値 color-1 color-2 color-3 両方を満たすだろう .color-1.color-2 と .color-2.color-3 ルール。この場合、両方とも同じ量の特異性を持っているため、カスケードが有効になり、最後に宣言されたルールがスタイルをオーバーライドします。この場合、 .color-2.color-3 宣言された最後のルールであるため、そのスタイルを適用します。

変更をに保存します index.html 次に、ブラウザでページを更新します。 3つすべての色 <h2> 要素は引き続き区別されますが、色相が視覚的に近くなります。

次のスクリーンショットは、これがブラウザにどのように表示されるかを示しています。

このセクションでは、文字列を作成する方法を紹介しました class 値を一緒に使用して、スタイルを適用するためのより具体的なシナリオを作成します。次のセクションでは、属性タイプに基づいてページ上の要素を見つける方法を学習します。

属性セレクターの使用

このセクションでは、属性セレクターを使用して要素を検索および選択します。前のセクションで、あなたは次のことを学びました id と class セレクターには、ターゲットとする属性の種類を示す記号と、それに続く選択する値があります。属性セレクターの形式は、次のように、角かっこで囲まれた属性の名前で構成されます。 [attr]. 属性セレクターは、次のような任意の属性で使用できます。 id と class.

属性セレクターの使用を開始するには、 index.html テキストエディタでファイルします。略語のHTML要素を追加します。 <abbr>、属性セレクターが有益な状況として。を配置します <abbr> の最初のインスタンスの周り CSS の中に <h1> エレメント。次に、別の場所を配置します <abbr> の最初のインスタンスの周り HTML 最初に <h2> エレメント。 HTMLで <abbr>、を追加します title 値が Hypertext Markup Language. これがどのようにフォーマットされるかについては、次のコードブロックを参照してください。

index.html

...
<h1 class="style-2">Using <abbr>CSS</abbr> Selectors</h1>
...
<h2 class="style-1 color-1 color-2">Selecting <abbr title="Hypertext Markup Language">HTML</abbr> To Style</h2>
...

変更をに保存します index.html、次にブラウザに戻ってファイルをロードします。 ChromeまたはFirefoxを使用している場合、ブラウザのデフォルトは <abbr> の要素 title 属性は、点線の下線を追加することです。視覚的インジケータの目的は、ユーザーがテキストにカーソルを合わせるようにすることです。その時点で、略語の意味は次のようになります。 title 属性の値が表示されます。次の画像はデフォルトを示しています <abbr> Firefoxでのスタイリング：

ChromeやFirefoxとは異なり、 Safari やその他の古いブラウザなど、一部のブラウザには、 <abbr> 要素には title. これと同じスタイルを、属性セレクターを使用したいくつかのカスタマイズとともに、これらの他のブラウザーに適用できます。

属性セレクターでスタイリングを開始するには、 styles.css テキストエディタでファイルします。の属性セレクターを追加します [title] 次に、セレクターブロックを中かっこで囲みます。セレクターブロックに、 text-decoration プロパティをに設定 underline. 次に、 text-decoration-style の値を持つプロパティ dotted. これらの2つのプロパティは、ブラウザ間でスタイルを均等化します。最後に、下線のカスタムルックを追加するには、プロパティを追加します text-decoration-color 値を使用してライトグレーに設定します hsl(0, 0%, 70%) .

これがコードでどのようにフォーマットされるかについては、次のコードブロックを参照してください。

styles.css

...
.color-2.color-3 {
  color: hsl(225, 70%, 40%);
}

[title] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: hsl(0, 0%, 70%);
}

変更をに保存します styles.css、次にブラウザに戻って更新します index.html. HTML テキストのスタイル設定に、明るい灰色の点線の下線が表示されるようになりました。次の画像は、これがブラウザにどのように表示されるかを示しています。

の使用に関する1つの問題 [title] セレクターとしての属性は、ページ上のほとんどすべての要素で使用できることです。これは、現在のセレクターが配置されている場合、 <img> また <a> の要素 title 属性もこれらのスタイルを受け取ります。この場合、セレクターは、 <abbr> エレメント。

セレクターにこの調整を行うには、に戻ります。 styles.css テキストエディタで。の左側に [title] 属性セレクター、追加 abbr 要素セレクター。これらのセレクターの間にスペースがないことを確認してください。これにより、ブラウザーは特に <abbr> 要素と title 属性。次のコードブロックは、追加された要素セレクターが強調表示された状態で、これがどのように表示されるかを示しています。

styles.css

...
abbr[title] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: hsl(0, 0%, 70%);
}

変更をに保存します styles.css. スタイルは、でのみ機能するようにスコープが変更されました <abbr> の要素 title 属性。 CSS <abbr> の中に <h1> 要素もこれらのスタイルを受け取りません。それは一致しますが abbr セレクター、それは持っていません title 属性などが一致しません。

このセクションでは、属性セレクターを使用して、スタイルのスコープを設定しました。 <abbr> 次の場合にスタイルを適用する要素 title 属性が存在します。次のセクションでは、特定の属性の値を照合することにより、属性セレクターのより高度な機能を使用します。

高度な属性セレクターの作成

属性セレクターは、HTML内の特定の属性を検索し、それらにスタイルを適用するのに役立ちます。ただし、属性セレクターには、属性の値を検索する方法もいくつかあります。この最後のセクションでは、属性セレクターを使用して、一致する値の文字列を検索し、これらの特定の条件を満たすスタイルを適用します。

開始するには、 styles.css テキストエディタのファイル。 HTMLには、Webサイトにアクセスするためのリンクがあります。 https://example.com; その特定のURLリンクをターゲットにするには、属性セレクターを作成します href 属性。次に、属性名に続く角かっこ内に、等号の後に文字列の引用符を追加します。それらの引用符の中に、追加します https://example.com. このセレクターは、指定されたURLに移動するリンクをターゲットにします。追加する color を使用して緑色のプロパティ hsl(150, 70%, 40%).

次のコードブロックで強調表示されているコードは、これが styles.css ファイル：

styles.css

...
abbr[title] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: hsl(0, 0%, 70%);
}

[href="https://example.com"] {
  color: hsl(150, 70%, 40%);
}

これらの変更をに保存します styles.css ブラウザに戻って更新します index.html. に行くリンクだけ https://example.com は緑色に変わりましたが、ページ上の他のリンクはデフォルトの青色のままです。次の画像は、これがブラウザにどのように表示されるかを示しています。

次に、に戻ります styles.css テキストエディタで、を使用してカスタムホバー状態を追加します :hover 疑似セレクター。セレクターは前のセレクターと同じように設定され、角括弧を閉じた直後に次のように設定されます。 :hover. 次に、セレクター内に color の明度の値を変更することにより、前の緑を暗くしたバージョンのプロパティ HSL から 40% に 20%.

コードでこれをフォーマットする方法については、次のコードブロックで強調表示されているコードを参照してください。

styles.css

...
[href="https://example.com"] {
  color: hsl(150, 70%, 40%); 
}

[href="https://example.com"]:hover {
  color: hsl(150, 70%, 20%);
}

変更をに保存します styles.css その後、リロードします index.html ブラウザで。に行くリンク https://example.com 次のアニメーションに示すように、ホバー状態が濃い緑色に切り替わります。

属性セレクターには、値文字列内の特定のシナリオを検索するための追加の条件修飾子があります。属性が検索できるこれらの条件の1つは、値が特定の文字列で始まるかどうかです。これは、 ^ 属性名と等号の間の記号。このアプローチは、安全なリンクを強調表示するために使用できます。つまり、次のURLで始まるURLに移動します。 https:// それ以外の http://.

戻る styles.css テキストエディタで、を使用して安全なURLで始まる値を探す属性セレクタを追加します。 [href^="https://"]. このセレクターは、 href で始まる要素 https://. 次に、リンクが安全であることを示す視覚的なインジケーターを追加するには、次のように追加して疑似要素セレクターを使用します ::before 閉じ括弧の直後。最後に、 ::before 疑似要素セレクターには content 使用するプロパティ。HTML要素のコンテンツの前に文字列を追加します。これの価値のために content プロパティ、ロック絵文字にUnicode識別子を使用します。 \1F512.

次のコードブロックの強調表示されたセクションは、この構文を示しています。

styles.css

...

[href^="https://"]::before {
  content: '\1F512';
}

変更をに保存します styles.css Webブラウザに戻ってリロードします index.html. 次の画像に示すように、コンテンツ内の2つのリンクには両方とも安全なリンクがあり、ロック絵文字でそのように示されています。

このセクションでは、属性セレクターの高度な機能を使用して、HTML属性の値で特定の文字列を検索しました。ここで説明したよりも多くのオプションが属性値シナリオで使用できます。さまざまな属性セレクターオプションについて詳しく知りたい場合は、 ChrisCoyierによるCSS属性セレクターのスキニーをお読みください。

結論

特定の再利用可能なスタイルを書くことは、効果的なCSSアーキテクチャの基礎です。このチュートリアルでは、をいつどのように使用するかを学びました。 id セレクター、どのように使用して再利用できるか class 複数の組み合わせのセレクター、および属性セレクターとその機能の一部を使用して、スタイルを追加する非常に具体的なシナリオを作成する方法。これらのセレクターは、Webサイトに生命と機能をもたらすスタイルを作成するための強力な資産です。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

getdocs

13036