ホームページ > 記事 > ウェブフロントエンド > CSSクラスセレクターとIDセレクターの違いを詳しく解説

CSSクラスセレクターとIDセレクターの違いを詳しく解説

小云云オリジナル: 2018-05-15 15:10:253638ブラウズ

この記事では主にCSSクラスセレクターとIDセレクターの違いを紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう。これが皆さんの CSS クラスセレクターと ID セレクターの学習に役立つことを願っています。

クラスセレクター

HTMLコード:

<p class="one"></p>
<p></p>

CSSコード:

p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

.one {
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}

Webページ内の特定の要素の外観を他の同様のタグとは異なるものにしたい場合は、クラスセレクターを使用できます。

まずセレクターに名前を付け、次にこの名前を装飾する HTML タグに割り当てます。たとえば、前の例では、最初の p に「one」という名前を付けました。

クラスセレクターは、要素がどのタグを使用しているかに関係なく、要素の外観を正確に制御することもできます。たとえば、e388a4556c0f65e1904146cc1a846bee タグ全体の外観に影響を与えずに、段落内の 1 つまたは 2 つの単語を装飾したいとします。このとき、クラスセレクターを使用して、装飾する単語を選択できます。

クラスセレクターを使用してタグ内の単語を選択する場合は、45a2772a6b6107b401db3c9b82c049c2 タグを使用する必要があることに注意してください。

クラスセレクターの使用法:

CSS では、クラスセレクターの名前はピリオドで始まる必要があります。このようにして、Web ブラウザはスタイルシート内のクラスセレクターを見つけることができます。
クラスセレクターの名前には、文字、数字、ハイフン、アンダースコアのみを含めることができます。
セレクターの名前は文字で始める必要があります。
クラスセレクターでは大文字と小文字が区別されます。
HTMLでは、タグでclass属性を設定します。 a0fb3933605c58a1083ab0c02200c997

HTML では、class 属性の値の前にピリオドを付ける必要はありません。ドットは、スタイルシート内のクラスセレクターの名前の前にのみ必要です。

ラベルは複数のクラスを使用します

同じクラスを異なるラベルに適用することに加えて、ラベルは同時に複数のクラスを使用することもできます。

複数のクラススタイルを書いたり、1つのタグに複数のクラスを設定したりするのは大変な作業のように思えますが、実際の開発ではよく行われます。人気のあるブートストラップフレームワークがこれを行います。

たとえば、複数の ps があります。各 p は同じサイズと境界線を持ちますが、他の属性は異なります。

HTML コード:

<p class="p one"></p>
<p class="p two"></p>
<p class="p three"></p>

CSS コード:

/* 类型选择器 */
p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

/* 以下三个都是类选择器 */
.one {
    background: linear-gradient(#1574A8, #15A892);
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
    background: radial-gradient(#E94E65, #15A892);
}
.three {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

Web ブラウザと HTML の両方で、同じタグに複数のクラスを設定できます。 HTML では、クラスは class 属性によって指定され、値内の各クラス名はスペースで区切られます。

ブラウザは各クラスの属性を結合して要素に適用します。

ID セレクター

CSS は ID セレクターを使用して、バナー、ナビゲーションバー、メインコンテンツ領域などの Web ページの特定の部分を選択します。

HTMLでIDを設定する方法はクラスを設定する方法と似ていますが、使用する属性が異なります。

HTML コード:

<p id="d1"></p>
<p></p>

CSS コード:

p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}
#d1 {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

HTML では、要素は id 属性を設定します。

CSS では、# ポンド記号で始まり、ID 名が続きます。

IDを正しく使おう

HTMLのid属性にはclass属性では実現できない機能がいくつかあります。これらの利点は CSS とは関係がないため、ID セレクターはまったく必要ありません。

ID の利点:

Web ページの主要な要素に ID を設定した後、JavaScript プログラマは、その ID を介して Web ページの特定の部分を簡単に見つけて処理できます。たとえば、プログラマは、訪問者の名前を入力するためのテキストボックスなど、フォームの要素に ID を設定することがよくあります。 JavaScript は、このフォーム要素を ID で見つけた後、たとえば、訪問者がフォームを送信するときにどのフィールドが空でないことを確認するなど、多くの処理を実行できます。
ID を使用すると、Web ページの特定の部分にリンクすることもできるため、多くのコンテンツを含む Web ページの素早いナビゲーションが容易になります。アルファベット順の用語集がある場合は、ID セレクターを使用して、各文字で始まるセクションにリンクできます。

Web デザイン界隈では、CSS で ID セレクターを使用しないようにする傾向があります。

私の理解では、ID セレクターは非常に具体的であるため、後でスタイルを上書きするのがより困難になります。また、ID の使用範囲はクラスの使用範囲ほど広くありません。

ID 属性は、一意に識別できる個人 ID カードに相当します。

クラス属性は人々の価値観に似ています。同じ価値観を持つ人がたくさんいる可能性があり、1 人が同時に複数の価値観を持つこともあります。

IDセレクターとクラスセレクターの違い

1つの要素は複数のクラスを持つことができ、1つのクラスを複数の要素に追加することもできます。
ID は同じ Web ページ内で 1 回のみ出現でき、要素は 1 つの ID のみを持つことができます。

CSSクラスセレクターとIDセレクターの違いを詳しく解説

関連記事