What is the difference checked and default pseudo-class cause they look similar? I’m confused. Please someone explain between two property diff.

CSS

* {
  border: none;
}

:checked {
  outline: 3px solid orange;
}

:default {
  outline: 3px solid blue;
}

HTML

<input type="checkbox" checked />
    <!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->

With this markup:

<select required>
    <option value="" disabled="disabled" selected="selected">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

and this CSS:

select option:default {
    display: none;
}

You get a dropdown where the first option is displayed like a placeholder, but it is not visible in the options list when displayed.

This also works for the mobile select widgets on Chrome Android and Safari iOS.

The example of default above is not working in my chrome even.