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

CSSのグループセレクターとは？複数要素をまとめてスタイリングする方法

CSSのグループセレクターは、複数の要素を一度に選択し、共通のスタイルをまとめて適用するための機能です。各要素に同じスタイルを個別に宣言する必要がなくなるため、コード量を大幅に削減でき、保守性も向上します。

グループセレクターの基本

セレクターをグループ化するには、各セレクターをカンマ（,）で区切って記述します。これにより、リストアップされたすべての要素に対して、同じ宣言ブロック内のスタイルが一括で適用されます。

構文

element, element {
    /* 宣言 */
}

それでは、具体的なコード例を見ていきましょう。

例1：複数の要素に共通スタイルを適用する

次の例では、article、p、img の3つの要素をグループ化し、中央揃えや下罫線などの共通スタイルを一度に指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
article, p, img {
    display: block;
    margin: auto;
    text-align: center;
    border-bottom: double orange;
}
</style>
</head>
<body>
<article>デモテキスト</article>
<p>これはデモテキストです。</p>
<br/>
<img src="https://www.tutorialspoint.com/swing/images/swing.jpg">
</body>
</html>

出力結果

このコードを実行すると、すべての要素が中央揃えになり、オレンジ色の二重罫線が下部に表示されます。

例2：疑似要素と組み合わせたグループ化

グループセレクターは疑似要素とも組み合わせられます。次の例では、div::after と p::after をグループ化し、両方の要素の後に同じコンテンツを挿入しています。

<!DOCTYPE html>
<html>
<head>
<style>
div::after, p::after {
    content: "デモテキスト";
    margin: 4px;
    box-shadow: inset 0 0 4px darkorange;
}
</style>
</head>
<body>
<div></div>
<p>これはサンプルテキストです。</p>
</body>
</html>

出力結果

このコードでは、div と p の両方の後ろに「デモテキスト」が挿入され、ダークオレンジ色の内側の影が付いたスタイルで表示されます。

まとめ

グループセレクターを使えば、同じスタイルを持つ複数の要素を1つのルールで管理できます。コードの重複を避け、CSSファイルをすっきりと保つための基本的かつ強力なテクニックなので、ぜひ活用してみてください。

  1. CSSセレクターで要素のスタイルを設定する方法をわかりやすく解説

    CSSセレクターを活用すると、自分の意図に合わせて特定の要素だけをピンポイントでスタイリングできます。HTML DOMの中から要素を選択する方法には、実にさまざまな種類が用意されています。CSSセレクターの基本構文CSSセレクターの基本的な書き方は以下の通りです。セレクター {     /* スタイル宣言 */ }それでは、実際のコード例を見ながら、CSSセレクターによる要素のスタイル設定方法を確認していきましょう。例1：IDセレクターを使ったスタイル指定まずは、#（シャープ）を使ったIDセレクターの例です。特定のIDを持つ要素のみにスタイルが適用されま

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

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