CSS 複数クラス セレクタ 解説
2024-09-21
CSSセレクタで2つのクラスを持つ要素に適用する
CSSセレクタは、HTML文書内の特定の要素をターゲットにするためのルールです。その中で、要素が複数のクラスを持つ場合、特定の組み合わせにマッチするセレクタを使用することができます。
2つのクラスを持つ要素へのセレクタ
- **ドット（.）**を使用し、各クラス名をスペースで区切ります。
.class1.class2 {
/* ここにスタイルを記述 */
}
このセレクタは、class1とclass2の両方のクラスを持つ要素にスタイルを適用します。
例
<div class="container">
<p class="text bold">This is a paragraph.</p>
</div>
.container .text.bold {
color: blue;
font-weight: bold;
}
この場合、containerクラスとtextクラス、boldクラスを持つ<p>要素に青色の太字が適用されます。
複数のクラスの組み合わせ
- 複数のセレクタを組み合わせることも可能です。
- 任意の組み合わせにマッチさせることができます。
.class1.class2, .class1.class3 {
/* どちらかの組み合わせにマッチする要素 */
}
要素の属性による絞り込み
- クラスに加えて、要素の属性を指定することもできます。
.class1[data-attribute="value"] {
/* class1を持ち、data-attribute属性の値が"value"の要素 */
}
注意
- 属性セレクタは、属性名と値を指定します。
- クラスの順序は関係ありません。
- クラス名はスペースで区切る必要があります。
<div class="container">
<p class="text bold">This is a paragraph.</p>
</div>
.container .text.bold {
color: blue;
font-weight: bold;
}
- CSS
.container .text.boldセレクタは、containerクラスの子要素であるtextクラスとboldクラスを持つ要素にスタイルを適用します。この場合、<p>要素に青色の太字が適用されます。 - HTML
<p>要素がcontainerクラス、textクラス、boldクラスを持っています。
例2
<div class="item red large">
<p>This is a red and large item.</p>
</div>
<div class="item blue small">
<p>This is a blue and small item.</p>
</div>
.item.red.large {
background-color: red;
font-size: 20px;
}
.item.blue.small {
background-color: blue;
font-size: 12px;
}
- CSS
各セレクタは、それぞれのクラスの組み合わせにマッチする要素にスタイルを適用します。 - HTML
複数の<div>要素が異なるクラスの組み合わせを持っています。
例3
<div class="container">
<p class="text bold">This is a paragraph.</p>
<p class="text italic">This is another paragraph.</p>
</div>
.container .text.bold, .container .text.italic {
color: green;
}
- CSS
セレクタは、containerクラスの子要素であるtextクラスとboldまたはitalicクラスを持つ要素にスタイルを適用します。 - HTML
複数の<p>要素が同じ親要素の下で異なるクラスを持っています。
- 要素の属性を使用して、複数のクラスを持つ要素をターゲットすることができます。
[class="class1 class2"] {
/* class1とclass2の両方のクラスを持つ要素 */
}
この方法では、要素のclass属性の値を直接指定します。
JavaScriptによる動的なスタイル適用
- JavaScriptを使用して、要素のクラスを動的にチェックし、スタイルを適用することができます。
const elements = document.querySelectorAll('.class1.class2');
elements.forEach(element => {
element.style.color = 'blue';
element.style.fontWeight = 'bold';
});
この方法では、JavaScriptのDOM操作を使用して、特定のクラスを持つ要素を取得し、スタイルをプログラム的に設定します。
CSSプリプロセッサの使用
- SassやLessなどのCSSプリプロセッサを使用すると、より柔軟なセレクタや変数、ミックスインなどの機能を利用できます。
.class1, .class2 {
@include my-style;
}
@mixin my-style {
color: blue;
font-weight: bold;
}
この方法では、ミックスインを使用して共通のスタイルを定義し、複数のクラスを持つ要素に適用することができます。
- CSSプリプロセッサを使用する場合は、コンパイルが必要となります。
- JavaScriptによる動的なスタイル適用は、パフォーマンスに影響を与える可能性があります。
- 属性セレクタは、ブラウザのサポート状況によっては制限がある場合があります。
css css-selectors
