web-dev-qa-db-ja.com

複数の識別子を持つcssクラス定義

私はCSSを学び始めたばかりで、私が完全に理解していない例に出会いました。私はそれをうまく説明できないので、答えを見つけるのが難しくなりました（したがって、見落としている答えがすでに存在する場合は謝罪します）。

私の質問は、次の例に関するものです。

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

CSSのクラスは.name構文を使用して定義され、次のようなタグで使用できることを理解しています。

<div class="name"></div>

.name1.name2の「二重」宣言がどのように機能し、タグでどのように使用されるかはわかりません。

関連するメモでは、与えられたサンプルWebサイトは、スタイルシートに存在しないタグのIDを使用しています。

htmlcssclass
24
Raj

たぶん、この使用例はあなたのために物事を明確にするでしょう。

次のシナリオを想像してください。

あなたが持っているでしょう：

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

そして、次のようにdivに同じ属性を持たせたいとしましょう：

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

ただし、.specialクラスの.general-divの背景を赤にし、.specialクラスのextra-divの背景を青にする必要があります。

あなたは書くでしょう：

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

問題の状況の使用が明らかになることを願っています。

36
Marko Francekovic

.classNameセレクタを使用するCSSでは、「className」クラスを使用してすべての要素のプロパティを定義できます。すべての要素には、より多くのクラスを含めることができます。より多くのクラスを持つセレクターの意味は、宣言でそれらをどのように組み合わせるかに依存します。

  • .class1.class2は、両方のクラスが定義されている要素のみに一致します。

    .class1.class2 { background: red; }
<div class="class1 class2"></div>

  • .class1, .class2は、.class1または.class2の要素と一致します

    .class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>

  • .class1 .class2は、class1の要素内のclass2の要素のみに一致します。

    .class1 .class2 { background: blue; }
<div class="class1">
    <div class="class2"></div>
</div>
50
diegocstn

<div class="name1 name2"></div>？のような二重クラスの使用方法

divクラスname1およびname2が必要です（ ライブデモを参照 ）。

どうでしょう.theme-light.slider-wrapper？

つまり、要素にはtheme-lightクラスとslide-wrapperクラスの両方が必要です（ ライブデモを参照 ）。

より多くの要素に適しています。一部の要素の背景を灰色にする必要があります。問題ない！クラスgrayを追加してcssを定義します。

.gray {
   background: #ddd;
}

また、いくつかの要素には赤いテキストが必要です。 cssでred-textクラスを定義します。

.red-text {
   color: red;
}

そして、段落の最後には灰色の背景と赤いテキストがあります。このred-textのようなgrayクラスと<p class="gray red-text">Lorem ipsum</p>クラスの両方を追加するだけです。

1
Vukašin Manojlović

.theme-light.slider-wrapperは、両方のクラスがあることを意味します。 HTMLでは、次のようになります。

<div class="theme-light slider-wrapper"></div>

IDに関しては、HTMLのIDをCSSで参照する必要がある理由はありません

1
Sean Redmond

ここに質問の詳細な説明があります。

color-coded class illustration

From：www.itsmesharath.in

0
Sharath

あなたは使わなければなりません

<div class="class1 class2">

オブジェクトに複数のクラスを適用します。

0
Victor