CSS Master

(Primo) #1
label:not(.label-radio) {
font-weight: bold;
display:block;
}

Figure 1.28. Using the :not() pseudo class to style form labels

Here’satrickierexample.Let’screatestylesfortextualinputs.Theseincludeinput
typessuchasnumber,email,andtextalongwithpasswordandurl.Butlet’sdo
thisbyexcludingradiobutton,checkbox,andrangeinputs.Yourfirstinstinct
mightbetousethefollowingselectorlist:

input:not([type=radio]),
input:not([type=checkbox]),
input:not([type=range]) {
...
}

Unfortunately,thiswon’twork,aseachselectoroverridesthepreviousone.It’sthe
equivalentoftyping:

44 CSS Master

Free download pdf