CSS :in-range-Pseudoklasse

Die `:in-range`-Pseudoklasse wählt alle Elemente mit einem Wert aus, der innerhalb eines angegebenen Bereichs liegt. Sie gilt für Elemente, die Bereichsattribute unterstützen. Fehlt diese Einschränkung, kann ein Element weder „im Bereich“ noch „außerhalb des Bereichs“ sein. Weitere Details finden Sie in der :out-of-range-Pseudoklasse.

Die `:in-range`-Pseudoklasse kann mit anderen Pseudoklassen verknüpft werden (z. B. :hover).

INFO

Der `:in-range`-Selektor funktioniert nur für <input>-Elemente mit min- und/oder max-Attributen, wie z. B. type="number", type="range" oder type="date".

Version

HTML Living Standard

Selectors Level 4

Syntax

CSS :in-range Syntaxbeispiel

css

:in-range {
  css declarations;
}

Beispiel für die `:in-range`-Pseudoklasse:

CSS :in-range Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:in-range {
        border: 2px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>:in-range selector example</h2>
    <form>
      <input type="number" min="1" max="10" value="5" />
    </form>
  </body>
</html>

Try it Yourself »

Practice

Welche Funktion hat die :in-range-Pseudoklasse in CSS?

Sie dient dazu, Eingabeelemente vom Typ Range zu stylen, wenn der aktuelle Wert zwischen min und max liegt.Sie dient dazu, Elemente zu stylen, wenn die Maus darüber schwebt.Sie dient dazu, Eingabeelemente zu stylen, wenn sie deaktiviert sind.Sie dient dazu, ein Element mit einem bestimmten Elternelement auszuwählen und zu stylen.Sie dient dazu, Eingabeelemente vom Typ Range zu stylen, wenn der aktuelle Wert außerhalb von min und max liegt.

CSS :in-range-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für die `:in-range`-Pseudoklasse: ​

Practice ​

CSS :in-range-Pseudoklasse

Version

Syntax

Beispiel für die `:in-range`-Pseudoklasse:

Practice