[解決済み] 1つのルールで複数のクラスを持つ要素を対象とする
2022-06-03 17:11:51
質問
私は複数のクラスを持つ要素を持ついくつかのHTMLを持っており、私は1つのルール内でそれらを割り当てる必要があり、同じクラスが異なるコンテナ内で異なることができるようにします。私の CSS にこれがあるとします。
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
そして、私のHTMLにはこのように書いてあります。
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
これらを1つのルールの中でターゲットにすることはできますか?例えばこんな感じで、うまくいかないのは分かっているのですが。
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
どのように解決するのですか?
-
.border-blue.background { ... }
は、両方のクラスが一緒に使われる場合のものです。 -
.border-blue, .background { ... }
はどちらかのクラス用です。 -
.border-blue .background { ... }
は '.background' が '.border-blue' の子である場合のものです。
関連
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
-
[解決済み] 複数のクラスを削除する(jQuery)
-
[解決済み] 2つのクラスを持つ要素に適用するCSSセレクタ
-
[解決済み] 複数のクラスに一度にスタイルを適用するにはどうすればよいですか?
-
[解決済み] 複数のクラスに基づいて要素を選択する
-
[解決済み】画像要素にbackground-size: coverとcontainに相当するものはありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル】 css border add four corners コード
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために
-
[CSSチュートリアル】空間均等性の問題を解決する2つの方法
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード