CSSの属性セレクターについて
#CSSは、必要に迫られたり、分からないことがあれば、適宜勉強するという程度なので、かなり素人です。
何かのきっかけで、属性セレクターを見つけました。
CSS の属性セレクター (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
:root {
--color-primary: #cfe2ff;
--color-success: #d1e7dd;
--color-warning: #fff3cd;
--bg-color: var(--color-primary);
}
[param=a] {
--bg-color: var(--color-success);
}
[param=b] {
--bg-color: var(--color-warning);
}
.color {
background-color: var(--bg-color);
}
</style>
</head>
<body>
<div>
<p class="color">test</p>
<p class="color" param="">test</p>
<p class="color" param="invalid">test</p>
<p class="color" param="a">test</p>
<p class="color" param="b">test</p>
</div>
</body>
</html>スクショもはっておきます。
Bootstrapは、ダークモードを始めとするカラーモードをサポートするようになりました！
v5.3.0では、独自のカラーモード・トグラーを実装することができ（Bootstrapのドキュメントにある例は下記を参照）、適切と思われるさまざまなカラーモードを適用することができます。
ライトモード（デフォルト）とダークモードをサポートしています。
カラーモードは、<html>要素上でグローバルに切り替えることも、data-bs-theme属性のおかげで、特定のコンポーネントや要素上で切り替えることもできます。