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

著者は、 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要素を選択する方法にあります。
ローカルマシンにindex.htmlとして保存された空の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>タグを追加し、ページのタイトルを設定し、最後に<link>タグを使用して後で作成するCSSファイルをロードします。

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

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というファイルを作成します。これは、index.htmlの<head>要素で参照したファイルです。 styles.cssファイルに、次のコードを追加します。

styles.css

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

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

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

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

IDセレクターの使用

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

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

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

index.html

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

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

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

CSSのidセレクターは、URLで参照される場合と同じ形式を使用します。ポンド記号の後に、#my-idなどのidの名前が続きます。 idセレクターの使用を開始するには、テキストエディターでstyles.cssを開きます。次に、index.htmlの2つのid属性値をグループコンビネーター#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;
}

idセレクターは、[X90X]のmarginを<header>要素と<main>要素の両方の上部と下部に適用します。 marginプロパティのauto値は、90%のwidthプロパティと組み合わせたときにコンテンツをページの中央に保持します。最後に、max-widthプロパティは、幅が60 0文字に相当する60chのサイズに達すると、両方のコンテナーがそれ以上広くなるのを防ぎます。

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

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

クラスセレクターの使用

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

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

index.html

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

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

classセレクターは、ピリオド記号（.）で示されるCSSの特殊文字を持っているという点で、idに似ています。 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属性を[X113X]の値で<h1>要素に追加します。これは、CSSで使用されるクラス名を定義します。次のコードブロックは、強調表示されたセクションでこの変更を示しています。

index.html

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

次に、<main>要素内の各<h2>要素に、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という名前のページでクラス属性を探すようにブラウザに指示します。次に、セレクターブロックを作成し、1.25remの値を持つfont-sizeプロパティ、uppercaseに設定されたtext-transformプロパティ、および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クラス用に別のクラスセレクターを作成します。クラス値の名前の前に必ずピリオドを追加してください。次に、そのセレクターに、2rem値とfont-weightプロパティがnormalに設定されたfont-sizeプロパティを追加します。次のコードブロックで強調表示されたコードを参照します。

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

クラスは、ページ上の任意の要素に再利用および適用できるため、強力なセレクターです。つまり、style-1クラスとstyle-2クラスの使用場所と方法を入れ替えることができ、CSSを変更する必要はありません。

この変更を行うには、index.htmlを開き、<h1>要素のclass属性値style-1をstyle-2に変更します。その後、<h2>要素のclass属性のstyle-2値を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セレクターをリファクタリングしました。また、フォントスタイルを<h1>および<h2>見出し要素に適用するために、2つの新しいclassセレクターを作成し、それらのclass属性値を交換して、受信する要素を変更しました。どのようなスタイル。次のセクションでは、HTML要素に複数のクラスを適用してクラスセレクターの操作を続けます。

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

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

まず、テキストエディタでstyles.cssファイルを開きます。次に、.color-1、.color-2、および.color-3の3つの新しいクラスセレクターを追加します。これらの3つのセレクターはそれぞれ、colorプロパティを持ち、色相スペクトルで50刻みで異なる同様のHSL値を持ちます。これにより、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を開きます。次に、<main>ブロックの3つの<h2>要素のそれぞれに色を追加します。最初の<h2>の場合、style-1の後にスペースを追加してから、color-1を追加します。 class属性の各値の間のスペースは、CSSから参照できる追加のclass名を示します。他の<h2>要素についても同じようにしますが、2番目の<h2>にはcolor-2値を使用し、3番目の<h2>にはcolor-3を使用します。

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

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は、color-1とcolor-2の両方を含むHTMLclass値を持つ要素のみを選択します。

セレクターで複数の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%);
}

このコードブロックでは、結合されたクラスセレクター.color1.color-2のcolorプロパティをhsl(275, 70%, 40%)に設定します。これは、.color-1の300値と.color-2の250の値。次に、.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用に作成したルールは、クラスの1つとしてcolor-1を持つHTML要素を探しています。 .color-1.color-2ルールは、クラスのリストにcolor-1とcolor-2の両方を持つHTML要素を探しています。 2番目のルールは最初のルールのサブセットであるため、より具体的であると言え、最初のルールをオーバーライドします。

作成した2つの結合されたクラスCSSルールでは、両方のルールが適用される可能性がある状況があります。たとえば、classの値がcolor-1 color-2 color-3のHTML要素は、.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>を<h1>要素のCSSの最初のインスタンスの周りに配置します。次に、最初の<h2>要素のHTMLの最初のインスタンスの周りに別の<abbr>を配置します。 HTML <abbr>を使用して、Hypertext Markup Languageの値を持つtitle属性を追加します。これがどのようにフォーマットされるかについては、次のコードブロックを参照してください。

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を使用している場合、title属性を持つ<abbr>要素のブラウザーのデフォルトでは、点線の下線が追加されます。視覚的インジケータの目的は、ユーザーがテキストにカーソルを合わせると、略語の意味であるtitle属性の値が表示されるようにすることです。次の画像は、Firefoxのデフォルトの<abbr>スタイルを示しています。

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

属性セレクターでスタイリングを開始するには、テキストエディターでstyles.cssファイルを開きます。 [title]の属性セレクターを追加してから、セレクターブロックの括弧を追加します。セレクターブロックで、underlineに設定されたtext-decorationプロパティを追加します。次に、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 テキストのスタイル設定に、明るい灰色の点線の下線が表示されるようになりました。次の画像は、これがブラウザにどのように表示されるかを示しています。

[title]属性をセレクターとして使用する場合の1つの問題は、ページ上のほぼすべての要素で使用できることです。つまり、現在のセレクターが配置されている場合、title属性を持つ<img>または<a>要素もこれらのスタイルを受け取ります。この場合、セレクターは<abbr>要素でのみ機能するようにスコープする必要があります。

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

styles.css

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

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

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

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

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

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

次のコードブロックで強調表示されているコードは、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で角かっこを閉じた直後に続きます。次に、セレクター内で、HSLの明度の値を40%から20%に変更して、前の緑の暗いバージョンでcolorプロパティを追加します。

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

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つは、値が特定の文字列で始まるかどうかです。これは、属性名と等号の間にある^記号で表されます。このアプローチは、安全なリンクを強調表示するために使用できます。つまり、http://ではなくhttps://で始まるURLに移動します。

テキストエディタでstyles.cssに戻り、[href^="https://%22]を使用して、安全なURLで始まる値を検索する属性セレクタを追加します。このセレクターは、https://で始まるhref要素を持つ要素にのみ一致します。次に、リンクが安全であることを示す視覚的なインジケーターを追加するには、閉じ括弧の直後に::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のスタイルを設定する方法の他のチュートリアルを試してください。