CODEWITHSUNDEEP
formscss
phurst-so
phurst-so

Reputation: 386

Trying to understand a CSS chain

can anybody explain the following code snippet (used in CSS):

[type="checkbox"]:checked

I've tried to find this on various sites, I understand the pseudo class on the end but the square brackets have really got me stumped.

Thanks for reading.

Upvotes: 2

Views: 62

Answers (3)

hungerstar
hungerstar

Reputation: 21675

[type="checkbox"] is an attribute selector.

This specific selector will match any element that has the attribute type and that attribute's value is checkbox. Most would identify this as a selector for and input but is not specific enough to be limited to that element type. Other elements that accept the type attribute are <button> <command>, <embed>, <object>, <script>, <source>, <style> and <menu>.

You'll often see input pre-pended to a selector like the one above, i.e. input[type="checkbox"], when targeting specific types of input.

Upvotes: 2

David Setz
David Setz

Reputation: 200

The square brackets target an attribute such as type for an input elemet. In your case you're selecting a checked checkbox.

Upvotes: 0

dippas
dippas

Reputation: 60553

this [type="checkbox"] is an attribute selector

[attr=value]

Represents an element with an attribute name of attr and whose value is exactly "value".

:checked is:

a pseudo class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

Which means you have a checkbox element checked

Upvotes: 3

Related Questions