[解決済み】CSSセレクタでクラスとIDを結合する方法は?
2022-04-16 08:11:37
質問
以下のようなdivがあった場合。
<div class="sectionA" id="content">
Lorem Ipsum...
</div>
という考えを表現するスタイルを定義する方法はありますか?
id='content'
AND
class='myClass'
をご覧ください。
それとも、次のように、どちらか一方だけでいいのでしょうか?
<div class="content-sectionA">
Lorem Ipsum...
</div>
または
<div id="content-sectionA">
Lorem Ipsum...
</div>
解決方法は?
スタイルシートの中で
div#content.myClass
編集部:これらも参考になるかもしれませんね。
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
と、あなたの例に倣って
div#content.sectionA
編集部 4年後
超古いのに見つけてくれる人がいるので。
ドンマイ
はセレクタでタグ名を使用します。
#content.myClass
よりも高速です。
div#content.myClass
なぜなら、tagName は必要ないフィルタリングのステップを追加してしまうからです。
セレクタでタグ名を使用するのは、必要な場合だけにしてください。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSを使用します。ウィンドウの幅の50%の背景色を設定する
-
[解決済み] moz-とwebkit-とは何ですか?[重複しています]。
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】display:noneの反対語はあるのか?
-
[解決済み】divの重なりについて
-
[解決済み] <div style="display:none">によるテーブルデータの非表示。
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法
-
[解決済み] Bootstrap 4のclass="mb-0 "とは何ですか?
-
[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成
-
[解決済み] ChromeでCSSが効かない