CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Element States Pseudo-Classes

Saqib Ishfaq
Saqib Ishfaq
13,912 Points

why is it that we have to specify more, after having specified the type attribute already

that <input> is the next sibling to <label> and when that is :checked { this should happen }

1 Answer

Zack Lee
Zack Lee
Pro Student 17,649 Points

the reason the selector is so long is because your defining a "path" to the tag you want. Check boxes are interesting because they have a state called checked. When a checkbox if checked you can define a selector that will effect an element other than the checkbox.

so in this example, we first reference the input with type checkbox, then we use a psuedo-class to specify that the properties are active when checked. then we use a sibling selector to specify that these properties are for the label sibling of the checkbox.

you can read the selector like this:

+ label //select the sibling label
input[type=checkbox]:checked //when the input checkbox is checked

//put it all together
input[type=checkbox]:checked + label {...} //when the checkbox is checked, select the label

so now, when the checkbox element is checked, this selector specifies the properties that change on the label. Css-tricks has some great articles on checkboxes you should check out.