web-dev-qa-db-ja.com

CSSセレクタでクラスとIDを組み合わせる方法

次のdivがあるとします。

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

「id='content' AND class='myClass'のdiv」という概念を表現するスタイルを定義する方法はありますか？

それとも、単純にどちらかの方向に行ったのでしょうか。

<div class="content-sectionA">
    Lorem Ipsum...
</div>

または

<div id="content-sectionA">
    Lorem Ipsum...
</div>
csscss-selectors
193
Larsenal

あなたのスタイルシートで：

div#content.myClass

編集：これらも役に立つかもしれません：

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

そして、あなたの例ごとに：

div#content.sectionA

編集、4年後:これは超古くて人々がそれを見つけ続けるので：しないでくださいセレクター。 tagNameは不要なフィルタリングステップを追加するため、#content.myClassはdiv#content.myClassよりも高速です。 セレクタにtagNamesを使用するのは、必要な場所だけにしてください。

293
ajm

Cssの#header .calloutと#header.calloutには違いがあります。

これが#header .calloutの「わかりやすい英語」です。
クラス名がcalloutで、IDがheaderの要素の子孫であるすべての要素を選択します。

そして#header.calloutは次のことを意味します。
IDがheaderでクラス名がcalloutのエレメントを選択してください。

もっと読むことができます css tricks

64
Reza Abbasi

通常、idは常に一意であるため、idで指定された要素を分類する必要はありませんが、本当に必要な場合は、次のようにします。

div#content.sectionA {
    /* ... */
}
4
Blixt

1つの要素でidとクラスを組み合わせることに問題はありませんが、1つの規則に対して両方でそれを識別する必要はありません。あなたが本当に欲しいなら、あなたはすることができます：

#content.sectionA{some rules}

他の人が示唆しているように、IDの前にdivは必要ありません。

一般的に、その要素に特有のCSSルールはIDで設定されるべきであり、それらはクラスだけのものより大きな重みを持っていることになるでしょう。クラスで指定されたルールは、調整が必要なときにいつでも複数の場所で変更したくない複数の項目に適用されるプロパティです。

結局これは結局のところ：

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

理にかなって？

4
Gabriel Hurley

あなたはcan CSSでIDとClassを組み合わせることができますが、IDは一意になるように意図されているので、CSSセレクタにクラスを追加することはそれを過修飾するでしょう。

2
Eric Wendelin

cSSのタグ変数にtag.id ; tag#classを使用します。

1
Lan...

私はあなたがすべて間違っていると思います。クラス対IDは、特定性の問題ではありません。論理的な用途はまったく異なります。

IDはページの特定の部分を識別するために使用されるべきです：ヘッダー、ナビゲーションバー、メイン記事、作家の属性、フッター。

クラスはページにスタイルを適用するために使用されるべきです。一般の雑誌サイトがあるとしましょう。サイトのすべてのページに同じ要素（ヘッダー、ナビゲーション、メイン記事、サイドバー、フッター）が追加されます。しかし、あなたの雑誌は経済学、スポーツ、娯楽の異なるセクションを持っています。あなたは3つのセクションに異なった外観を持たせたい - 経済学保守的で正方形、スポーツアクションy、娯楽の明るさと若さ。

そのためにクラスを使います。あなたは複数のIDを作る必要はありません - #conomics-articleと＃sports-articleと＃entertainment-article。それは意味がありません。そうではなく、.economics、sports、および.entertainmentの3つのクラスを定義してから、それぞれの#nav、#article、および#footerのIDを定義します。

0
Greg

IDはドキュメント全体で一意であると想定されているため、両方に基づいて選択する必要はありません。 class="class1 class2"を使えば、要素に複数のクラスを割り当てることができます。

0
Ben Hughes