innerhalb einer Klasse

-1

wie kann ich wählen Sie alle divs in einem div außer divs, die verschachtelt sind innerhalb einer classinnerhalb einer Klasse

für Beispiel:

<div id="test"> 
    <div> 
     Some Content 
    </div> 
    <div> 
     Some Content 
     <div class="testAgain"> 
      <div>Some Content again</div>...<div>Test Content</div> 
     </div> 
    </div> 
</div>

Wie kann ich alle wählen Divs innerhalb id =test mit Ausnahme der divs innerhalb der Klasse testAgain. I.e. alle CSS Ich möchte gelten für alle divs mit Ausnahme des Inhalts innerhalb der testAgain Klasse Div.

I versucht:

#test div :not(.testAgain) div{ 
    /* some CSS Styling */ 
}

Aber das scheint nicht zu funktionieren. (keine Jquery bitte!) Danke für die Hilfe im Voraus.

EDIT: Es gibt tatsächlich Dutzende von verschachtelten Divs .. und der testAgain Klasse ist etwas 6-7 Ebenen auf der Haupt div (Test div)

Quelle

2017-12-14 Rohit Raj

Ihr Problem ist, dass es in CSS kein Elternteil Wähler ist, so kann man nicht „, sagen nicht auswählen Dieses div, wenn es in diesem anderen div mit einer bestimmten Klasse ist ", alles, was Sie tun können, ist, wie die Antworten suggerieren, nämlich einen allgemeinen Stil anzuwenden und dann diesen Stil für divs innerhalb der Klasse zurückzusetzen. Das kann oder kann nicht Ihren Bedürfnissen entsprechen, wenn es nicht dann leider ist, ist JavaScript die einzige andere Möglichkeit. – delinear

-4

div.test > div

Das die direkten alle Nachkommen von div wählt Klassenprüfung.

Quelle

2017-12-14 10:33:32

Dies funktioniert nicht, wenn ein div in einem anderen div ist. – Roberrrt

Exakt! Es gibt tatsächlich Dutzende von verschachtelten Divs .. und die 'testAgain'-Klasse ist etwas 6-7 Ebenen nach unten der Haupt-Div (' test' div) –

Dies erfüllt keine der OP-Anforderungen? Es werden keine verschachtelten divs ausgewählt und es werden keine divs ausgeschlossen, die direkte Kinder von #test mit einer Klasse von .testAgain sind (vorausgesetzt, dass .testAgain überall in der Struktur vorkommen kann). – delinear

-1

Sie fast richtig sind, außer Ihrer eigenen Struktur wählt alle <div> Tags, die innen andere div sind.

#test div:not(.testAgain) { 
 
    background-color: #F00; 
 
} 
 

 
#test div.testAgain, 
 
#test div.testAgain div { 
 
    background-color: #0F0; 
 
}

<div id="test"> 
 
    <div> 
 
     Some Content 
 
    </div> 
 
    <div> 
 
     Some Content 
 
     <div class="testAgain"> 
 
      <div>Some Content again</div>...<div>Test Content</div> 
 
     </div> 
 
    </div> 
 
</div>

einfach das letzte div entfernen, und Sie werden gut zu gehen.

Quelle

2017-12-14 10:35:46 Roberrrt

Es funktioniert nur für die TestAgain-Klasse, aber nicht für "divs" darin. Checkout https://jsfiddle.net/1myv0su9/1/ Ich möchte nicht, dass das Innere rot oder blau ist .. einfach nicht ausgewählt .. so kann es Browser Standard-Config oder eine CSS der Eltern über es rendern. –

Technisch gesehen ist Ihr gesamter Inhalt "nicht in einer testAgain-Klasse" enthalten.' – Roberrrt

Ja, aber im Idealfall möchte ich nicht nur direkte Nachkommen betroffen sein, aber jedes Div innerhalb der 'testAgain' Klasse sollte nicht betroffen sein. –

Sie können es mit dem id Selektor:

#test div { /* all div's inside the #test */ 
 
    background: #00f; 
 
} 
 

 
#testAgain div { /* all div's inside the #testAgain */ 
 
    background: #f00; 
 
}

<div id="test"> 
 
    <div> 
 
    Some Content 
 
    </div> 
 
    <div> 
 
    Some Content 
 
    <div id="testAgain"> 
 
     <div>Some Content again</div>...<div>Test Content</div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    Some Content 
 
    <div> 
 
     Some Content 
 
    </div> 
 
    </div> 
 
    <div> 
 
    Some Content 
 
    <div>Some Content 
 
     <div>Some Content</div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-12-14 10:38:14 VXp

innerhalb einer Klasse

Antwort

Verwandte Themen