Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

checked

The checked UI element states pseudo-classes selector will target elements that have a "checked" state such as radio buttons and checkboxes.
Syntax Logicelement:checked { property_list }

CSS Code Example

<style> input:checked { cursor:crosshair; } </style> <input type="checkbox" name="cb1"> <input type="checkbox" name="cb2" checked="checked"> Use it to toggle the display of other elements in the document: <style> #p1 { display: none; } #cb1:checked ~ #p1 { display: block; } </style> <input type="checkbox" id="cb1" name="cb1"> <label for="cb1">Agree to terms</label> <p id="p1">Thanks for agreeing!</p>

CSS

Selectors

universaltypecompoundclassidnotattributedescendantchildadjacent siblinggeneral siblingfirst childlast childonly childfirst of typelast of typeonly of typenth childnth last childnth of typenth last of typeemptyrootfirst linefirst letterbeforeafterlinkvisitedhoveractivefocustargetenableddisabledcheckedlang