HTMLのIDとクラス属性およびそれらのCSSセレクター

Webページのスタイル設定にCSSを使用する場合、ページの特定の部分をターゲットにすることがよくあります。 1つ以上の要素を選択する方法の1つは、IDまたはクラス属性、あるいはその両方を使用することです。

このチュートリアルを進めながら、インタラクティブなCodepenをチェックして、一緒に遊んでください！

ID属性とCSSセレクター

先に進み、

タグを使用して簡単な段落を作成しましょう：

   <p> Color this paragraph! </p>

IDは、単一の要素を追加して一意に識別する一意の識別子です。規則id=” #NAME”に従います。

そのことを念頭に置いて、段落に色を付けたいので、一意の名前を付けましょう。

   <p id="paragraph-colored"> Color this paragraph! </p>

IDの一意の識別子ができたので、同じIDを別の要素に追加しないようにする必要があります。ブラウザは文句を言いませんが、目的を失い、CSSは意図したとおりに機能しません。

IDを配置したら、CSSでハッシュタグ記号＃を使用してIDを選択できます。 pタグを紫色にしましょう：

#paragraph-colored {
  color: purple;
}

簡単-簡単ですよね？ ＆＃128516;

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

クラス属性とそのCSSセレクター

かっこいい、テキストが紫色の段落があります。ここで、単一のpタグの下に多数のアボカド画像があると仮定します。

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado">

これらすべてのアボカド開発者をどのように特定して選択することができますか（それが意味するものは何でも）？ IDタグは単一のアイテムを一意に識別するために使用されるため、使用できないことはわかっています。ここで、クラス属性が役立ちます。

class属性は、慣例class =” #CLASS_NAME”に従います。多くのメンバーがクラスに所属できるため、すべてのアボカド開発者に次のようなクラスを割り当てることができます。

<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="avocado" class="avocado-devs">

すごい！私たちのアボカド画像には、クラス「avocado-devs」が割り当てられています。これで、単純なドット（。）で表されるCSSクラスセレクターを使用できます。先に進んで、CSSフィルタープロパティをアボカド開発者に追加しましょう。彼らは夜遅くまで働いていると思いますので、色を100パーセント反転させましょう。

.avocado-devs {
  filter: invert(100)
}

クラスでは基本的にグループを作成し、CSSクラスセレクターでは要素のグループに必要に応じてスタイルを適用できます。

クラスセレクターでの汎用タグセレクターの使用

CSSでクラスを選択するときは、ドットセレクターと組み合わせて汎用タグセレクターを使用する方がよいことがよくあります。なんで？より具体的 私たちはセレクターを使用しているので、CSSははるかにうまく適用されます。

CSSでは、タグ名で参照することで汎用タグセレクターを使用します。したがって、たとえば、これらはすべて有効なタグセレクターです。

/* H1 */ 
h1{}
/* Paragraphs */ 
p{ }

したがって、imgを含めることで、画像セレクターをリファクタリングできます。 汎用タグ：

img.avocado-devs {
  filter: invert(100)
}

機能は変更されていませんが、コードが大きくなるにつれて、この特異性が重要になります。また、コードが読みやすくなります。他の開発者は、avocado-devsクラスが画像を参照していることがわかります。

ここでは特定のクラス名を持つ画像にのみフィルターを適用するため、これは重要です。適切なクラスなしで別のavocado-devイメージを追加した場合、スタイルは適用されません。 Web開発者として、この条件付きの動作は私たちが望むものであることがよくあります。