JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSクラスセレクターの基本と使い方を実例付きで解説

クラスセレクターとは

CSSでは、要素のclass属性に基づいてスタイルルールを定義できます。指定したクラス名を持つすべての要素は、そのルールに従って自動的にスタイルが適用されます。

.black {
    color: #808000;
}

このルールにより、ドキュメント内でclass属性に「black」が設定されたすべての要素の文字色が黒（#808000）で表示されます。

特定の要素だけに適用する方法

クラスセレクターは、さらに条件を絞り込むことも可能です。例えば、以下のように記述します。

h1.black {
    color: #808000;
}

この場合、「black」クラスが設定されている<h1>要素のみにスタイルが適用されます。他の要素（<p>や<div>など）に同じクラス名が付与されていても、このルールの対象にはなりません。

複数のクラスを同時に適用する

1つの要素に対して、複数のクラスセレクターを組み合わせて適用することもできます。クラス名を半角スペースで区切って指定するだけでOKです。

<p class="center bold">
    この段落は「center」と「bold」の2つのクラスからスタイルを受けます。
</p>

上記の例では、<p>要素に「center」と「bold」という2つのクラスが指定されており、それぞれのクラスに定義されたスタイルが同時に反映されます。この仕組みを活用すると、汎用的なスタイルを部品化して再利用しやすくなり、CSSのコード全体もすっきりと整理できます。

  1. CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方

    CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま

  2. CSSの:focus-within疑似クラスの使い方をわかりやすく解説

    フォーカスを受け取った要素そのものだけでなく、その親要素にもスタイルを適用したい場合は、CSSの:focus-within疑似クラスを使用します。:focus-withinは、「要素自身、またはその子孫要素のいずれかがフォーカスを持っているとき」に一致する疑似クラスです。フォーム全体やカード型レイアウトなど、入力フィールドを含むコンテナの見た目を動的に変化させたい場面で特に便利です。以下に、CSSの:focus-within疑似クラスの具体的な使用例を示します。例1：フォームへの適用<!DOCTYPE html> <html> <head> <styl