✔ Regel mit Bedingung

[Benutzer007]

Hallo,

wie müsste denn die CSS-Regel für folgenden Pseudo-Code lauten:

alle div [wo "display="none" ist] .header1 {
color:red
}

Grüße

 

[Robinson97]

Kann dir vielleicht dieser Link weiterhelfen ?

 

[SpiceLab]

Falls es sich nicht, wie von @Robinson97 vermutet, um Inline-Styles (style-Attribute) handelt

<div style="display:none">...</div>

die als Attribut-Selektor herangezogen werden können

div[style="display:none"] {color:red}

wirst du nicht ohne den Einsatz von JS zum Ziel kommen.

http://www.drweb.de/magazin/html-5-...igenschaften-von-stylesheets-zugreifen-45257/

Nur welchen Zweck verfolgst du mit dieser zusätzlichen Formatierung für die versteckten Elemente?

[edit]Tipp-Ex[/edit]​

 

[jeipack]

Also nach Inline-Styles selektieren ist überhaupt keine gute Idee. Beim Inline-Style können ja auch noch andere Anweisungen dazu kommen und dann funktioniert der Selektor nicht mehr.
Und ist einfach überhaupt nicht sauber.
Und auch wenn du es über Javascript machen willst würde ich mir überlegen ob es nicht eine bessere Methode gibt diese Elemente zu identifizieren. Eventuell kannst du eine Klasse setzen? Oder anhand des Elternelement die Elemente finden.

Muss mich aber auch SpiceLab anschliessen, für was einem versteckten Div eine Farbe zuweisen? Ob nun rot oder grün, du wirst sowieso nichts sehen

 

[Benutzer007]

Ihr seid sehr aufmerksam ;-) Ich habe die Frage daraufhin geändert.
Es sollen die divs wie beschrieben selektiert werden, weil dann von den .Header1 die Farbe geändert werden soll.

Wieso wäre dazu dieser Code nicht geignet?

div[style="display:none"] {color:red}

Oder habe ich das falsch verstanden?

 

[SpiceLab]

Ihr seid sehr aufmerksam ;-) Ich habe die Frage daraufhin geändert.
Es sollen die divs wie beschrieben selektiert werden, weil dann von den .Header1 die Farbe geändert werden soll.

Kinderelemente eines versteckten Elternelements sind selbstverständlich auch unsichtbar

Und bleiben es selbst mit

.Header1 {display:block !important}

oder auch

div[style="display:none"] .Header1 {display:block !important}

Die gleichen Gesetzmäßigkeiten gelten für visibility:hidden | visible.

Wieso wäre dazu dieser Code nicht geignet?

div[style="display:none"] {color:red}

Oder habe ich das falsch verstanden?

Grundsätzlich ist der Selektor dann geeignet, wenn diese drei Bedingungen erfüllt sind:

1. Die Formatierung erfolgt mit dem style-Attribut im <div>-Tag.
2. Der Attribut-Selektor findet in der Zeichenfolge des Attributwerts eine Übereinstimmung vor.
3. Keine zusätzliche JS-gestützte CSS-Formatierung des Elements (z.B. jQuery -> http://api.jquery.com/css/), ansonsten ist es futschikato: http://jsfiddle.net/spicelab/qv41ajvf/

<div style="display:none"><div class="Header1">...</div></div>

div[style="display:none"] .Header1 {color:red}

Soviel zur Theorie

[edit]Tipp-Ex[/edit]​

 

[jeipack]

Wieso wäre dazu dieser Code nicht geignet?

Also nach Inline-Styles selektieren ist überhaupt keine gute Idee. Beim Inline-Style können ja auch noch andere Anweisungen dazu kommen und dann funktioniert der Selektor nicht mehr.

Und ist einfach überhaupt nicht sauber.

Wieso wäre dazu dieser Code nicht geignet?

div[style="display:none"] {color:red}

Und wenn es

div[style="display: none"] {color:red}

ist? oder

div[style="display:none;"] {color:red}

weil dann von den .Header1 die Farbe geändert werden soll.

Wieso dann nicht einfach

.header1 {color:red}

?

Oder habe ich das falsch verstanden?

Ein div mit display:none kannst du nicht sehen, also nützt es ja nichts darin die Farbe von irgendwas zu ändern.

 

[SpiceLab]

Wieso dann nicht einfach

.header1 {color:red}

Weil dieser Selektor auch die sichtbaren Elemente beinhaltet

Über den Sinn und Zweck bei versteckten Elementen (inkl. Kindelement) haben wir beide ja aber schon ausdrücklich hingewiesen.

 

[jeipack]

So gilt die Regel auch für die sichtbaren Elemente

Ja eben! "Ich will die Farbe aller .header1 Elementen ändern, aber bitte nur bei denen die nicht sichtbar sind!" -

 

[SpiceLab]

Über den Sinn und Zweck bei versteckten Elementen (inkl. Kindelement) haben wir beide ja aber schon ausdrücklich hingewiesen.

Ja eben! "Ich will die Farbe aller .header1 Elementen ändern, aber bitte nur bei denen die nicht sichtbar sind!" -

Dem haben wir nichts mehr hinzuzufügen