CSSクラスとサブクラス

102

これが機能していないように見えるため、私がやっていること以外に、これを行うことは可能ですか？そのclass.subclass専用のCSSを使用するために、クラスの下にあるサブクラスを持つことができるようにしたいと思います。

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

そのため、親cssクラス "area1"、 "area2"の下の要素にclass = "item"を使用できます。これを機能させるためにclass = "area1 item"を使用できることはわかっていますが、なぜそれが非常に冗長である必要があるのか理解できません。cssサブクラスは、それを定義するために、その下にある親クラスを調べるべきではありませんか？

注：これはIE（現在7を使用）では機能しますが、FFでは機能しません。そのため、これはCSSの標準的な方法ではないと想定しています。

css

— ライアン・アボット
ソース

182

スペースを追加するだけです：

.area2 .item
{
    ...
}

— チャドバーチ
ソース

私は実際にサブクラスを実際に使用していません……これが必要になる理由を誰かに教えてもらえますか？

— patricksweeney

2

サブクラスは、必要に応じてCSSルールに特定性を追加するためのもう1つの方法にすぎません。メインクラスを持つこともできますが、ドキュメント内の場所に基づいて要素のルールを変更できます。

— マットハウエル

74

参考までに、上記のようにルールを定義すると、2つのセレクターがチェーンされます。

.area1.item
{
    color:red;
}

その意味は：

このスタイルを、クラス「area1」と「item」の両方を持つすべての要素に適用します。

といった：

<div class="area1 item">

悲しいことにIE6では機能しませんが、それが意味するところです。

— マットハウエル
ソース

1

これは実際に私が探していたものでした。説明してくれてありがとう！

— F-3000

私はこれが古いことを知っていますが、「area1」と「item」の代わりに「area1」または「item」を意味しますか？それは大きな違いをもたらします。

— Mgamerz 2014

これをありがとう、私はこれを理解するために頭を悩ませていました。

— user3547774 2016

26

あなたの問題は、CSSの2つのクラスの間にスペースがないことです：

.area1.item
{
    color:red;
}

する必要があります

.area1 .item
{
    color:red;
}

— オウム
ソース

14

子供だけが選択されるように強制しますか？ http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

— MrChrister
ソース

1

思っていたのではありませんが、直接の子供だけが欲しい場合には、これは良い情報です。ありがとう！

— ライアンアボット

それについては知りませんでした。MrChristerをありがとう

— Sebastian Sastre

10

.area1と.itemの間にスペースを入れるだけです。例：

.area1 .item
{
    color:red;
}

このスタイルは、area1クラスの要素内にあるitemクラスの要素に適用されます。

— M4N
ソース

8

クラスの間にスペースを入れるだけ

.area1 .item
{
    ...
}

CSSセレクターの非常に優れたリファレンスを以下に示します。

— mbillard
ソース

6

上記のkR105の返信に続いて：

私の問題はOP（元のポスター）の問題と同様であり、テーブルの外部でのみ発生したため、サブクラスは親クラス（テーブル）のスコープ内から呼び出されず、その外側で呼び出されたため、セレクターを追加する必要がありました、kR105が言及したように。

ここに問題がありました：2つのボックス（div）があり、それぞれが同じborder-radius（HTML5）、パディング、およびマージンを持っていますが、それらを異なる色にする必要がありました。カラークラスごとにこれらの3つのパラメーターを繰り返すのではなく、「スーパークラス」にborder-radius / padding / marginを含め、次に個々の「サブクラス」だけに違いを表現したいと考えました（実際にはサブクラスではないため、それぞれを二重引用符で囲んでいます-私の後の投稿を参照してください）。以下にその方法を示します。

HTML：

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS：

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

これが役に立ったと誰かが願っています。

— Maximus
ソース

3

それがCSSのバックボーンであり、カスケードスタイルシートの「カスケード」です。

CSSルールを1行で記述すると、構造が見やすくなります。

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

複数のクラスを使用することも、CSSの優れた中間/高度な使用法です。残念ながら、IE6のよく知られたバグがあり、クロスブラウザーコードを記述するときにこの使用法を制限しています。

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 はマルチクラスルールの最初のセレクターを無視するため、IE6は実際に.area1.largerルールを次のように適用します

/*.area1*/.larger { ... }

つまり、すべての.larger要素に影響します。

IE6の非常に厄介で不幸なバグ（多くのバグの1つ）は、1つのクリーンなクロスブラウザーCSSファイルが必要な場合に、CSSの機能をほとんど使用しないことを強制します。

次に、解決策は、CSSクラス名プレフィックスを使用して、総称クラス名との衝突を回避することです。

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

クラスを1つだけ使用することもできますが、そうすることで、.area1Largerが.area1などにのみ影響することを認識しながら、CSSを意図したロジックに保つことができます。

1

たとえば、divに適用するクラスは、そのdivのスタイル要素の参照ポイントとして使用できます。

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

スーパーセマンティックになるには、クラスをテーブルに移動する必要があります。

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— ジョージ・ウィスコム
ソース

1

このような要素内に2つのクラスを持つこともできます

<div class = "item1 item2 item3"></div>

クラスの各アイテムは独自のクラスです

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
ソース

1

kR105が書いた：

このような要素内に2つのクラスを持つこともできます

<div class = "item1 item2 item3"></div

カスケードスタイルの原則により、最後のスタイルが優先されるため、この値はわかりません。たとえば、前の例でHTMLを次のように変更した場合

 <div class="box1 box2"> Hello what is my color? </div>

.box2のスタイルがこれらの値を割り当てるため、ボックスの境界線とテキストは青になります。

また、以前の投稿で、セレクターを追加することは、クラス内にサブクラスを作成すること（このスレッドの最初のソリューション）と同じではないことを強調しましたが、効果は似ています。

— Maximus
ソース