Wie mache ich eine CSS "when" abfrage, um zu prüfen, ob Objekt da ist?

Das Problem ist eigentlich ganz einfach erklärt. Ich habe ein Objekt und möchte nur, wenn es nicht da ist, dass ein CSS Script weiter ausgeführt wird.

So sieht mein Code aus:

@when Objekt(display: none) {
/*Script*/}
@else {
}

Hat jemand eine Idee, was ich falsch mache?

Vielen Dank für eure Hilfe!

Answer 1

[medmonk]

Eine Abfrage, so wie du sie dir wünscht, ist mit CSS nicht möglich. Dafür müsstest du schon ein Fünkchen JavaScript verwenden. Nichtsdestotrotz bekommst du das gewünschtes Ergebnis auch mithilfe der CSS Pseudoklasse nth-child umgesetzt.

HTML:

<div>
  <span class="text">Dieser Inhalt wird versteckt</span>
  <span class="text">Dieser Inhalt wird angezeigt</span>
</div>

CSS:

.text:nth-child(2) {
  display: none;
}

Mit dem nth-child Selektor wird das zweite Kind-Element angesprochen und über display: none ausgeblendet. Wird nun das erste Kind-Element entfernt, rückt das zweite Kind-Element an dessen Position und wird folglich angezeigt.

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Answer 2

[paaauleee]

Das geht mit purem CSS nicht - es gibt zwar die Idee von @when und @else - die beziehen sich aber auf MediaQueries und werden, soweit ich weiss, von noch keinem Browser unterstützt.

Evtl lässt sich das mit SCSS oder SASS lösen