CSS-Klassen und Unterklassen

102

Ist es möglich, anders als das, was ich tue, weil es nicht zu funktionieren scheint, dies zu tun? Ich möchte in der Lage sein, Unterklassen zu haben, die sich unter einer Klasse befinden, um das CSS speziell für diese class.subclass zu verwenden.

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>

Damit ich nur class = "item" für die Elemente unter der übergeordneten CSS-Klasse "area1", "area2" verwenden kann. Ich weiß, dass ich class = "area1 item" verwenden kann, um dies zum Laufen zu bringen, aber ich verstehe nicht, warum es so ausführlich sein muss. Sollte die CSS-Unterklasse nicht prüfen, unter welcher übergeordneten Klasse sie sich befindet, um sie zu definieren?

Hinweis: Dies funktioniert im IE (derzeit mit 7), in FF jedoch nicht. Daher gehe ich davon aus, dass dies keine CSS-Standardmethode ist.

css Ryan Abbott
quelle

182

Sie müssen nur ein Leerzeichen hinzufügen:

.area2 .item
{
    ...
}

Chad Birch
quelle

Ich benutze selbst keine Unterklassen ...... kann mir jemand einen Grund nennen, wo dies notwendig wäre?

Patricksweeney

2

Unterklassen sind nur eine weitere Möglichkeit, Ihren CSS-Regeln gegebenenfalls zusätzliche Spezifität zu verleihen. Sie können eine Hauptklasse haben, aber Sie können die Regel für ein Element basierend darauf ändern, wo es sich im Dokument befindet.

Matt Howell

74

Zu Ihrer Information, wenn Sie eine Regel wie oben definieren, wobei zwei Selektoren miteinander verkettet sind:

.area1.item
{
    color:red;
}

Es bedeutet:

Wenden Sie diesen Stil auf jedes Element an, das sowohl die Klasse "area1" als auch "item" hat.

Sowie:

<div class="area1 item">

Leider funktioniert es in IE6 nicht, aber genau das bedeutet es.

Matt Howell
quelle

1

Das war eigentlich das, wonach ich gesucht habe, danke, dass du es erklärt hast!

F-3000

Ich weiß, dass dies uralt ist, aber meinst du "area1" oder "item" anstelle von "area1" und "item"? Es macht einen signifikanten Unterschied.

Mgamerz

Vielen Dank dafür, ich habe mir den Kopf zerbrochen, um das herauszufinden.

user3547774

26

Ihr Problem scheint ein fehlender Abstand zwischen Ihren beiden Klassen im CSS zu sein:

.area1.item
{
    color:red;
}

Sollte sein

.area1 .item
{
    color:red;
}

Papageien
quelle

14

Möchten Sie nur die Auswahl von Kindern erzwingen? 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
quelle

1

Nicht das, was ich gedacht habe, aber das ist eine gute Information, wenn ich nur direkte Kinder haben möchte. Vielen Dank!

Ryan Abbott

Wusste nichts davon. Vielen Dank für diesen MrChrister

Sebastian Sastre

10

Setzen Sie einfach ein Leerzeichen zwischen .area1 und .item, z. B.:

.area1 .item
{
    color:red;
}

Dieser Stil gilt für Elemente mit Klassenelementen innerhalb eines Elements mit Klassenbereich1.

M4N
quelle

8

Setzen Sie einfach ein Leerzeichen zwischen Ihre Klassen

.area1 .item
{
    ...
}

Hier ist eine sehr gute Referenz für CSS-Selektoren .

mbillard
quelle

6

Im Anschluss an die Antwort von kR105 oben:

Mein Problem war dem des OP (Original Poster) ähnlich und trat nur außerhalb einer Tabelle auf, sodass die Unterklassen nicht aus dem Bereich der übergeordneten Klasse (der Tabelle) heraus aufgerufen wurden, sondern außerhalb der Tabelle, sodass ich Selektoren HINZUFÜGEN musste , wie kR105 erwähnt.

Hier war das Problem: Ich hatte zwei Kästchen (divs) mit jeweils demselben Randradius (HTML5), Polsterung und Rand, musste sie jedoch in verschiedenen Farben gestalten. Anstatt diese 3 Parameter für jede Farbklasse zu wiederholen, wollte ich, dass eine "Oberklasse" Randradius / Auffüllung / Rand enthält, dann nur einzelne "Unterklassen", um ihre Unterschiede auszudrücken (doppelte Anführungszeichen um jede, da sie nicht wirklich Unterklassen sind - siehe meinen späteren Beitrag). So hat es geklappt:

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}

Hoffe jemand findet das hilfreich.

maximus
quelle

3

Das ist das Rückgrat von CSS, der "Kaskade" in Cascading Style Sheets.

Wenn Sie Ihre CSS-Regeln in einer einzigen Zeile schreiben, können Sie die Struktur leichter erkennen:

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

Die Verwendung mehrerer Klassen ist auch eine gute fortgeschrittene / fortgeschrittene Verwendung von CSS. Leider gibt es einen bekannten IE6-Fehler, der diese Verwendung beim Schreiben von browserübergreifendem Code einschränkt:

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

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

IE6 IGNORIERT die ersten Wähler in einer Multi-Class - Regel, so IE6 gilt tatsächlich die .area1.larger Regel als

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

Dies bedeutet, dass ALLE größeren Elemente betroffen sind.

Es ist ein sehr böser und unglücklicher Fehler (einer von vielen) in IE6, der Sie dazu zwingt, diese Funktion von CSS so gut wie nie zu verwenden, wenn Sie eine saubere browserübergreifende CSS-Datei wünschen.

Die Lösung besteht dann darin, CSS-Klassennamenpräfixe zu verwenden, um eine Kollision mit generischen Klassennamen zu vermeiden:

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

.area2.area2Larger { ... }

Kann auch nur eine Klasse verwenden, aber auf diese Weise können Sie das CSS in der von Ihnen beabsichtigten Logik beibehalten, während Sie wissen, dass .area1Larger nur .area1 usw. betrifft.

quelle

1

Die Klasse, die Sie auf das Div anwenden, kann beispielsweise als Referenzpunkt für Stilelemente mit diesem Div verwendet werden.

<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 */

Um super semantisch zu sein, sollten Sie die Klasse auf den Tisch verschieben.

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

George Wiscombe
quelle

1

Sie können auch zwei Klassen in einem solchen Element haben

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

Jedes Element in der Klasse ist eine eigene Klasse

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

kR105
quelle

1

kR105 schrieb:

Sie können auch zwei Klassen in einem solchen Element haben

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

Ich kann den Wert davon nicht erkennen, da nach dem Prinzip der Kaskadierung von Stilen der letzte Vorrang hat. Zum Beispiel, wenn ich in meinem früheren Beispiel den HTML-Code zum Lesen geändert habe

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

Der Rand und der Text der Box wären blau, da der Stil von .box2 diese Werte zuweist.

Auch in meinem früheren Beitrag hätte ich betonen sollen, dass das Hinzufügen von Selektoren nicht das gleiche ist wie das Erstellen einer Unterklasse innerhalb einer Klasse (die erste Lösung in diesem Thread), obwohl der Effekt ähnlich ist.

maximus
quelle

CSS-Klassen und Unterklassen

Antworten: