CSS Solid

☰

Pseudo-Class - :checked

Selects checked elements.

Example: 


<!DOCTYPE html>
<html>
<head>
    <title> CSS pseudo-class selector - :checked</title>
    <style>
        input:checked + span {
          color:white;
          background-color:green;
        }
    </style>
</head>
<body>
    <div>
        <input type="checkbox" id="chkManager" />
        <span> Manager </span>

    </div>
</body>
</html>

Result:

In the above example,

  • Sets background and text colors to SPAN element when check box is checked.
  • No color set to SPAN element when check box is unchecked.