Selektory#
Pseudokalsa zaznaczenia#
:checked { /* deklaracje */ }Pseudoklasa :checked reprezentuje elementy interfejsu użytkownika (wejścia), które są przełącznikami (tzn. posiadają stan zaznaczenia lub odznaczenia) i w danej chwili znajdują się w stanie zaznaczenia, np. na skutek wybrania przez użytkownika.
Najnowszy HTML5 podaje listę elementów ze stanem zaznaczenia, które będą pasowały do pseudoklasy :checked. Warto przypomnieć, że niektórym kontrolkom można ustawić domyślne zaznaczenie za pomocą atrybutów checked lub selected.
Elementy w stanie odznaczenia można wybrać za pomocą pseudoklasy negacji:
:not(:checked)Trzeba podkreślić, że pseudoklasa zaznaczenia ma charakter dynamiczny, czyli odznaczenie elementu spowoduje, że style nadane przez pseudoklasę :checked zostaną anulowane.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:checked {outline: 5px solid red; border: 5px solid red;}
input:not(:checked), option:not(:checked) {outline: 5px solid green; border: 5px solid green;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Formularz</legend>
<p>
<label><input type="radio" name="plec" value="f">Kobieta</label>
<label><input type="radio" name="plec" value="m" checked="checked">Mężczyzna</label>
</p>
<p>
<label><input type="checkbox" checked="checked" name="lan" value="en">Angielski</label>
<label><input type="checkbox" checked="checked" name="lan" value="fr">Francuski</label>
<label><input type="checkbox" name="lan" value="de">Niemiecki</label>
</p>
<select multiple="multiple">
<option selected="selected">Mozilla Firefox</option>
<option selected="selected">Google Chrome</option>
<option>Microsoft Internet Explorer</option>
<option>Opera</option>
</select>
</fieldset>
</form>
</body>
</html>Na chwilę obecną jedynie Firefox prawidłowo obsługuje pseudoklasę :checked. Chrome i IE nie uwzględniają zaznaczonych elementów option wewnątrz select.