nicht angemeldet
Lieber borisbaer,
Tut mir leid, dass ich da so doof nachfragen muss, aber wie genau funktioniert das?
lass uns mal Deine Selektoren anschauen:
body.fullscreen-active { margin: 0 !important; } header.fullscreen-active { display: none !important; } footer.fullscreen-active { display: none !important; } main.fullscreen-active { margin: 0 !important; } h1.fullscreen-active { display: none !important; }
Über die Verwendung von !important hat @Matthias Apsel ja schon etwas gesagt. Diese Selektoren funktionieren alle gleich: Sie beschreiben einen Element-Namen (body, header, usw.), gefolgt von einem Klassennamen, der diesen Elementen vergeben wurde. Wir wollen jetzt aber sagen, dass sie einen Vorfahren benötigen, der eine Klasse hat:
body.fullscreen-active header { ... }
Hier beschreiben wir mit dem Leerzeichen, dass ein Element ein Nachfahre dessen ist, was vor dem Leerzeichen steht. Also ein beliebig tief verschachteltes header-Element, das entweder direkt selbst im <body> steckt, oder irgendwo drin steckt, was dann selbst ein Kind von <body> ist.
#map-fullscreen.fullscreen-active { margin: 0 !important; } #map-fullscreen button.fullscreen-active { background-image: url("/images/main/fullscreen-exit.png") !important; } #map-container-1.fullscreen-active { width: 100vw !important; margin: 0 !important; padding: 0 !important; } #map-container-2.fullscreen-active { width: 100vw !important; height: 100vh !important; }
Na siehste! Du verwendest ja selbst schon Nachfahren-Selektoren! Der Selektor #map-fullscreen button.fullscreen-active {} ist ein solcher!
Aber was wir wollen, ist den Bezug zu einem übergeordneten body mit einer bestimmten Klasse herzustellen:
body.fullscreen-active #map-fullscreen {...}
body.fullscreen-active #map-fullscreen button {...}
body.fullscreen-active #map-container-1 {...}
body.fullscreen-active #map-container-2 {...}
Das bedeutet, dass wir nur noch einem Element die Klasse fullscreen-active geben, und zwar dem Element, in dem alle die Elemente stecken, die wir visuell verändern wollen. In meinen Beispielen ist das das body-Element.
Liebe Grüße
Felix Riesterer
Gunnar Bittersmann
Tabellenkalk
Matthias Apsel
Rolf B
MudGuard