CSS "checked" auf nur einen input (checkbox) anwenden?

Hallo,

Ich mache gerade für Info eine Webseite, allerdings dürfen wir noch kein JavaScript benutzen.

Deshalb habe ich , um die Webseite responsive zu machen das ganze mehr oder weniger mit einem input (checkbox) geregelt, die man nicht sieht, welche dann durch ein label verbunden ist, was wiederrum eine art Burger-Stapel ist. Auf diesen kann man clicken, und dann schieben sich die Links von oben nach unten.

Spielt aber hierfür keine Rolle.

Auf jeden Fall habe ich in CSS logischerweise dann das mit "checked ~" gemacht, was auch funktioniert.

Nun möchte ich aber einen Darkmode integrieren, und brauche dafür nochmal einen zweiten input (auch wieder checkbox), also im Prinzip das selbe Spiel nochmal.

Allerdings prüft "checked ~" ALLE checkboxen, sodass das responsive nicht mehr funktioniert, wenn der Darkmode aktiv wäre.

Kann ich also irgendwie nur immer die JEWEILIGE checkbox prüfen lassen?

Danke im Voraus! :)

Answer 1

[medmonk]

Du kannst Elemente in CSS auf unterschiedliche Weise ansprechen (selektieren). Sei es direkt über das Element selbst, mithilfe von IDs und Klassen oder mithilfe eines ganzen Sets an unterschiedlichen Pseudo-Klassen.

HTML:

<div class="toggle-group">
 <label>
  <span class="sr-only">Menü</span>
  <input class="mobile-menu-toggle" type="checkbox">
 </label>
 <label>
  <span class="sr-only">Dark Mode</span>
  <input class="dark-mode-toggle" type="checkbox">
 </label>
</div>

CSS:

/* only visible for screenreaders */
.sr-only:not(:focus):not(:active){
  width: 1px; height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* */
.mobile-menu-toggle:checked {
  property: value;
}

.dark-mode-toggle:checked {
  property: value;
}

Du kannst auch mit IDs und dem For-Attribut arbeiten. Ich selber würde jedoch IDs nur als JavaScript-Hook verwenden, jedoch nicht in CSS. Dort würde ich eigentlich immer Klassen vorziehen, alleine wegen der Spezifität und Wiederverwendbarkeit.

LG medmonk

Answer 2

[Ben Sellin]

Hallo Lilly17uwu,

du kannst mit <input id="check1"/> sowie <input id="check2"/> und dann in CSS mit #check1 und #check2 die Elemente genau identifizieren.

Ben

Comments

[Lilly17uwu]

danke danke ✌🏻

[Ben Sellin]

@Lilly17uwu

Kein Problem :)

[regex9]

Der input-Tag ist ein void-Element. Es gibt also keinen Endtag dafür.

[Ben Sellin]

@regex9

Ich kann nicht alle Tags ausm Kopf, aber danke für die Korrektur. Hab die Frage bearbeitet :)

Answer 3

[TechPech1984]

dann schreibst du danach genau das element an was du brauchst damit hast du das für das element überschrieben , man kann meist jedes element irgendwie erreichen .