HTMLコンテナに複数のクラスを割り当てる方法は？[閉まっている]

398

単一のHTMLコンテナに複数のクラスを割り当てることは可能ですか？

何かのようなもの：

<article class="column, wrapper">
html  class 
— アルゴ
ソース
今、どんな問題がありますか？これがこの問題の解決策でした。他の問題はいくつかの要因に依存する可能性があります。
— Aurelio De Rosa
1
これは可能ですが、私は通常、CSS継承で入れ子になったコンテナーを使用します。これはかなりきれいで、通常はより便利です。
— ジョナサンヘンソン2012年
コンマを削除しても問題が解決しない場合は、ルールが機能しない理由に関するガイダンスを確認することをお勧めします。私にとって最も一般的なスピードバンプは、そこに「省略表記の使用」（つまり、暗黙的にデフォルト値に戻す）として記述されている状況です
— LJ in NJ

回答:

188

標準から

7.5.2要素識別子：idおよびclass属性

属性の定義

id = name [CS]
この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。

class = cdata-list [CS]
この属性は、クラス名またはクラス名のセットを要素に割り当てます。任意の数の要素に同じクラス名を割り当てることができます。複数のクラス名は、空白文字で区切る必要があります。

はい、それらの間にスペースを置いてください。 

<article class="column wrapper">

もちろん、CSS継承でできることはたくさんあります。ここにさらに読むための記事があります。

— ジョナサン・ヘンソン
ソース
3
同じ属性に異なる値を設定する複数のクラスに要素が割り当てられている場合、ブラウザはどのように反応するでしょうか。そのための優先順位はありますか？
— EternallyCurious 2014年
6
@JonathanHenson：いいえ、違います。特定性が関連付けられている場合、CSSの後半で発生するルールが優先されます。
— Ulrich Schwarz
1
@UlrichSchwarzは、後でリストされているCSSクラス（これをテストしたときに期待していたもの）、または後ですべてのCSSファイルにありますか？前者はほとんどの場合、私がテストしたブラウザーでは機能しませんが、後者の仮説はテストしました。
— ジョナサンヘンソン2014年
9
@JonathanHenson：CSS 2.1仕様によると、「2つの宣言が同じ重み、起点、および特異性を持っている場合、後者が優先されます。インポートされたスタイルシートの宣言は、スタイルシート自体の宣言の前にあると見なされます。」つまり、CSS宣言の順序です。class属性の名前には順序が指定されていません。これ.fooは、[class ~= foo] refの構文シュガーである「属性foo内の単語」であるためclassです。
— Ulrich Schwarz、
1
@UlrichSchwarz明確化していただきありがとうございます。
— ジョナサンヘンソン
18

複数のクラスをhtml要素に割り当てるには、両方のクラス名をclass属性の引用符で囲み、スペースで区切ってください：

<article class="column wrapper">

上記の例では、columnおよびwrapperは2つの別個のcssクラスであり、両方のプロパティがarticle要素に適用されます。

— Webeng
ソース
16
この答えは以前と何が違うのですか？
— イバン・ロドリゲス・トーレス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.