Wie man CSS nur auf direkte Kinder einer bestimmten Klasse anwendet

Lesezeit: 2 Minuten

Benutzer-Avatar
Dvir Levy

Ich habe ein div und darin div Ich möchte eine andere erstellen div mit einer anderen Klasse und haben die innere div vollständig von außen getrennt div CSS-Einstellungen.

So was:

<div class="outer">
    <div><h1> h1 </h1><div>
    <div class="inner">
        <h2> h2 </h2>
    </div>
    <h2> h2 </h2>
</div>
.outer h1{ color:blue; }
.outer h2{ color:red; }

.inner { height: 111px; }

Was ich möchte, ist die rote Farbe aus dem zu entfernen h2 in dem "inner" div

Es mag dumm erscheinen, die Farbe hier nicht einfach auf Schwarz zu übergewichten, aber was ist, wenn ich viel mehr Argumente im CSS habe oder es sogar dynamisch ist.

Bearbeiten: Ich denke, es ist nicht klar, aber was ich brauche, ist eigentlich das Gegenteil der Antworten, die ich bisher bekommen habe. Ich habe ein Hauptcontainer-Div und es hat viele Einstellungen im CSS. Jetzt möchte ich ein div in den Hauptcontainer einfügen, ohne dass es eine der CSS-Einstellungen des Hauptcontainers hat.

.outer > h2 { color:red; }

Auf diese Weise erhält nur das direkte Kind des äußeren Div diesen Farbwert, sollte den Job beheben.

  • Ja, ich denke, es ist nicht klar. aber was ich brauche, ist eigentlich das gegenteil davon. Ich habe ein main-container div und es hat viele Einstellungen in der css. Jetzt möchte ich eine einfügen div in die main-container ohne dass es etwas davon hat main-container CSS-Einstellungen

    – Dvir Levy

    27. Februar 2012 um 20:03 Uhr

  • Es gibt ein paar Ansätze. Eine besteht darin, a anzugeben color nur für .inner h2 { ... }. Dadurch bleiben alle anderen h2s innerhalb des Hauptcontroller-Div gleich, nur das eine im Inneren ist anders. Eine andere besteht darin, dem letzten h2 eine Klasse zu geben und eine andere Farbe dafür anzugeben, und dass der Hauptcontroller nicht versucht, h2s zu stylen. Dies führt dazu, dass das h2 von inner und alle anderen h2 gleich sind und das andere h2 einen anderen Stil hat. Beispiele: jsfiddle.net/5pvpdfud

    – Martin

    17. Dezember 2014 um 20:25 Uhr


  • Es gibt vier verschiedene Kombinatoren in CSS3: 1. Nachkommenselektor (Leerzeichen): .outer h2: Alle Nachkommen 2. Kindselektor (>) : .outer > h2 : Unmittelbares Kind 3. Selektor für benachbarte Geschwister (+) : .outer + h2 : Unmittelbares Geschwister vom selben Elternteil 4. Allgemeiner Geschwisterselektor (~) : .outer ~ h2 : Alle Geschwister vom selben Elternteil

    – Abhijeet

    19. September 2016 um 9:15 Uhr


.outer .inner * { color: #000; }

setzt alle Elemente innerhalb des inneren Containers auf die Farbe Schwarz.

Demo hier

Ich denke, was Sie brauchen, ist

.inner h2 {color: inherit}

1256500cookie-checkWie man CSS nur auf direkte Kinder einer bestimmten Klasse anwendet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy