Psewdoklass focus-within

Psewdoklass focus-within fokusda ýerleşýän elementler üçin stili kesgitleýär. Derwezän özüne stili kesgitleýän psewdoklass focus-den tapawutlylykda, focus-within ata-element üçin stili kesgitleýär.

Sintaksis

cssselektor:focus-within {

}

Mysal

Onuň çagasy input elementi fokusda bolanda, ata-elementiň fonunyň reňkini gök reňke kesgitläýli:

html<div>
  Adyňyzy giriziň: <input name="user">
</div>
cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

Şeýle-de garap görüň

  • :indeterminate psewdoklassy,
    ýagdaýy anyklanmadyk aýlawyjylar üçin stili kesgitleýär
  • :default psewdoklassy,
    ädip görnüşdäki elementler üçin stili kesgitleýär
  • :fullscreen psewdoklassy,
    doly ekran režimindäki elementler üçin stili kesgitleýär
  • :placeholder-shown psewdoklassy,
    görkezmä teksti görkezilende elementler üçin stili kesgitleýär
  • caret-color aýratynlygy,
    inputdaky tekst kursorunyň reňkini kesgitleýär