CSS Alle enthaltenen Elemente ausschließen

[Mackz]

Hi Leute,

um eine Seite responsive zu bekommen, wird per CSS wie folgt global die Breite aller DIV Elemente reseted:

div{
        width: auto!important; 
    }

Das funktioniert alles soweit super und die Seite ist bereits live, responsive und erziehlt bei Google 100/100 Punkte der Mobile Nutzererfahrung.

Soweit so gut. Jedoch gibt es einen Haken.

In der Seite gibt es einen bestimmten DIV Container mit der ID #meincontainer
In diesen Container werden dynamisch per JS weitere HTML Elemente geladen, unter anderem auch weitere DIV Container. Diese dynamisch erstellten DIV Container verfügen über keine IDs oder Klassenzuordnung.

Das globale "width:auto" führt bei diesen DIV Containern zu fehlerhaften Formatierungen, da diese bereits per "style" Attribut vordefiniert sind.

Ich muss also alle DIV Elemente die sich innerhalb vom DIV #meincontainer befinden, von dieser globalen Regel ausschließen.

Nun gibt es in CSS3 ja den tollen :not Selector mit dem das theoretisch möglich sein soll. Ich kriegs jedoch leider nicht hin Die W3C Doku ist dabei auch wenig hilfreich, da sie kaum Details liefert.

Ich hab schon alles mögliche probiert, wie:
div:not(#meincontainer){ ... }
div:not(#meincontainer div){ ... }
div:not(#meincontainer *){ ... }
div *:not(#meincontainer){ ... }
div|*:not(#meincontainer){ ... }
div:not(#meincontainer):not(div){ ... }

Nichts geht.

Hat vielleicht jemand von euch eine Idee?

Thx!

 

[Fluffy]

Hallo Mackz,

das !important-Feature von CSS ist IMHO eine Seuche.
Führt nur zu Problemen.
Es kann sein das deine Selektoren funktionieren, aber du musst dann die Änderungen ebenfalls mit !important annotieren, denn !important sorgt dafür das die damit annotierte Regel nicht mehr der Reihenfolge oder der Kenntlichmachung(IDs, Classes) unterworfen ist.

Du kannst auch den ">"-Selektor ausprobieren.
Dieser hat keine globalen Auswirkungen wie deine Versuche.

div#meincontainer > div {
//rules
}

Gruß

Fluffy

 

[Mackz]

Hallo Fluffy,

deine Regel würde doch aber nur Anwendung finden bei allen DIV innerhalb von #meincontainer und außerhalb liegende DIV würden nicht formatiert werden.

Ich will doch aber genau das Gegenteil erreichen, nämlich das global alle DIV formatiert werden, AUßER alle DIV innerhalb von #meincontainer

 

[xeno]

Nur mal ins Blaue geraten:

div:not(#meincontainer *) {
 //zeug
}

 

[Mackz]

Nur mal ins Blaue geraten:

div:not(#meincontainer *) {
 //zeug
}

Wäre am logischsten... geht aber nicht ...

Siehe: https://jsfiddle.net/bjLjhec6/

Siehe auch :

Ich hab schon alles mögliche probiert, wie:
div:not(#meincontainer){ ... }
div:not(#meincontainer div){ ... }
div:not(#meincontainer *){ ... }
div *:not(#meincontainer){ ... }
div|*:not(#meincontainer){ ... }
div:not(#meincontainer):not(div){ ... }

 

[Fluffy]

Mackz,
Ja, aber genau das willst du doch haben.
Du definierst eine Regel für ausserhalb von #meinContainer und dann änderst du die Regel für #meinContainer > * .

https://jsfiddle.net/bjLjhec6/4/

Und vergiss die !import - Notation nicht.

Gruß

Fluffy

 

[Mackz]

Mackz,
Ja, aber genau das willst du doch haben.
Du definierst eine Regel für ausserhalb von #meinContainer und dann änderst du die Regel für #meinContainer > * .

https://jsfiddle.net/bjLjhec6/4/

Nein das geht so nicht
Die dynamisch generierten Elemente besitzen ja dynamisch generierte Style Attribute. Nachträglich einfach zurück setzen geht also nicht, da man die verschiedenen Style Attribute ja nicht kennt
Beispiel:
<div id="meincontainer">
<div style="width:345px"></div>
<div style="width:100px"></div>
<div style="width:50%"></div>
</div>

Man müsste schon den :not Selector irgendwie nutzen...

 

[Fluffy]

Ich hab eben gerade nochmal meine Antwort gelöscht.
Dein Problem ist IMHO nicht primär das CSS, wie vorher angenommen.
Dein Problem ist das Markup und wie die Selectoren dementsprechend geschrieben werden, denn die :not-Selektoren und die anderen Selekoren wirken auf unterschiedlichen Ebenen.

Als Beispiel dafür :

https://jsfiddle.net/bjLjhec6/9/

Denn es gibt kein element auf das div:not(selector) * {} greifen könnte .

Gruß

Fluffy

Edit:
Und du darft nicht vergessen das die Fiddle keine !important-Annotation besitzt, d.h. können die Regeln sich hier überschreiben, du brauchst also in den inline-styles auch !important, sonst werden sie übergangen, d.h. wenn du das inline-Css nicht beeinflussen kannst brauchst du JS um das zur Laufzeit einzufügen.

 

[Mackz]

Jo das !important ist klar, auch wenns nicht schön ist
JS fällt aus technischen Gründen aus.

Aber dein Markup passt. Danke! :thumb_up: Komisch das ich das nicht selbst probiert habe.