CSSを拡張するためのクラスとID
今日のWeb上にWebサイトを構築するには、CSS（Cascading Style Sheets）を十分に理解している必要があります。 これらは、ブラウザウィンドウでどのようにレイアウトするかを決定するためのWebサイトの指示です。 一連の「スタイル」をHTMLドキュメントに適用すると、Webページのルックアンドフィールが作成されます。
これらの前述のスタイルをドキュメントに適用するには多くの方法がありますが、ドキュメントの一部の要素だけではなく、その要素のすべてのインスタンスでスタイルを使用することがしばしばあります。
個々のインスタンスごとにスタイルルールを繰り返すことなく、ドキュメント内の複数の要素に適用できるスタイルを作成することもできます。 これらの望ましいスタイルを実現するには、クラスとIDのHTML属性を使用します。 これらの属性は、ほぼすべてのHTMLタグに適用できるグローバル属性です。つまり、ドキュメント内の分割、段落、リンク、リスト、またはその他のHTML部分のスタイリングに関わらず、クラス属性とID属性を使用してこの作業を手助けしてください！
クラスセレクタ
クラスセレクタを使用すると、ドキュメント内の同じ要素またはタグに複数のスタイルを設定できます。 たとえば、テキストの特定のセクションをドキュメント内の残りのテキストと異なる色で呼び出すことができます。 これらの強調表示されたセクションは、ページ上で設定している「アラート」である可能性があります。 段落に次のようなクラスを割り当てることができます：
p {色：＃0000ff; }
p.alert {color：＃ff0000; }
これらのスタイルはすべての段落の色を青色（＃0000ff）に設定しますが、class属性が "alert"の段落は赤色（＃ff0000）のスタイルになります。 これは、class属性がタグセレクタのみを使用する最初のCSSルールよりも高い特異性を持っているためです。
CSSを使って作業する場合、より具体的なルールは、あまり具体的でないルールを上書きします。 したがって、この例では、より一般的な規則ではすべての段落の色が設定されますが、2番目のより具体的な規則は、一部の段落でのみ設定を上書きします。
これはいくつかのHTMLマークアップでこれがどのように使用されるのかを示しています：
この段落は、ページのデフォルトである青色で表示されます。
この段落も青色で表示されます。
この段落は、class属性が要素セレクタのスタイリングからの標準青色を上書きするため、赤色で表示されます。
この例では、 "p.alert"というスタイルは、その "alert"クラスを使用する段落要素にのみ適用されます。複数のHTML要素でそのクラスを使用する場合は、HTML要素を次のようにピリオド（。）をそのまま使用してください。
.alert {background-color：＃ff0000;}
このクラスは、それを必要とするすべての要素で使用できるようになりました。 "alert"というクラス属性値を持つHTMLの部分は、このスタイルを取得します。 下のHTMLには、「警告」クラスを使用するパラグラフと見出しレベル2があります。 これらの両方は、ちょうど示したCSSに基づいて背景色が赤色になります。
この段落は赤で書かれています。
このh2も赤色になります。
今日のウェブサイトでは、クラス属性は、IDが持つ特異性の観点から簡単に操作できるため、ほとんどの要素でよく使用されます。 現在のHTMLページの中には、文書内で複数回繰り返されるものや、一度しか表示されないものなど、クラス属性でいっぱいになるものがあります。
IDセレクタ
ID セレクタを使用すると、タグや他のHTML要素に関連付けることなく、特定のスタイルに名前を付けることができます。 HTMLマークアップにイベントに関する情報が含まれている部門があるとします。
この区分にID属性に「event」を付けることができます。次に、1ピクセル幅の黒い境界線でその区分を概説する場合は、次のようなIDコードを記述します。
#event {border：1px solid＃000; }
IDセレクタの課題は、HTMLドキュメント内で繰り返すことができないことです。 それらは一意でなければなりません（サイトの複数のページで同じIDを使用できますが、HTMLドキュメントごとに1回のみ使用できます）。 したがって、この境界線を必要とする3つのイベントがある場合は、それらにそれぞれ「event1」、「event2」および「event3」というID属性を与え、それぞれにスタイルを設定する必要があります。 したがって、前述の「イベント」のクラス属性を使用して、それらをすべて一度にスタイルする方がはるかに簡単です。
ID属性のもう一つの課題は、クラス属性よりも特異性が高いことです。 これは、以前に確立されたスタイルを上書きするCSSが必要な場合、IDにあまりにも頼りすぎている場合は、そうするのが難しいことを意味します。 この理由から、多くのWeb開発者は、その値を一度しか使用しない場合でも、マークアップ内のIDを使用しなくなり、ほぼすべてのスタイルで特異性の低いクラス属性に変わってしまいました。
ID属性が作用する領域の1つは、インページアンカーリンクを持つページを作成する場合です。 たとえば、視差スタイルのWebサイトで、1ページのすべてのコンテンツが含まれ、そのページのさまざまな部分にリンクするリンクがあるとします。 これは、これらのアンカーリンクを使用するID属性とテキストリンクを使用して行われます。
リンクのhref属性に＃記号の前に付いた属性の値を次のように追加するだけです：
これはリンク
クリックまたはタッチすると、このリンクはこのID属性を持つページの部分にジャンプします。 ページ上のどの要素もこのID値を使用していない場合、リンクは何も行いません。
サイト内でページ内リンクを作成する場合は、ID属性の使用が必須ですが、一般的なCSSスタイル設定のためにクラスに切り替えることはできます。 これは今日のページをマークアップする方法です - クラスセレクタを可能な限り使用し、属性をCSSのフックとしてだけでなくページはめ込みリンクとしても機能させる必要がある場合にのみIDに切り替えます。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：8/9/17