Css selector - which one to prefer when classes with space? -

when selecting phone number using css selector, got stuck coming across class space among them. @ least ten selectors can achieve target. question 1 should prefer , why? in advance.

elements within class lies:

<div itemprop="telephone" class="phones phone primary">(310) 443-8911</div> 

selectors i've talked above:

div.phones div .phones  div.phones.phone div .phones.phone     div.phone.primary div .phone.primary    div.primary div .primary   div.phones.phone.primary div .phones.phone.primary 

a space between classes indicates separate class names, not single name. example, class="phones phone primary" means element has 3 classes: phones, phone, , primary.

you can select element using of these classes. example:

div.phones div.phones.phone div.phone.primary div.primary div.phones.phone.primary 

however following not work:

div .phones  div .phones.phone     div .phone.primary    div .primary   div .phones.phone.primary 

to select element <div itemprop="telephone" class="phones phone primary">(310) 443-8911</div> (unless happens descendant of div) because space between div , class(es) listed indicates descendant relationship. in other words, introducing space means select element listed classes (e.g. .phones.phone) descendant of div.

in terms of 1 of valid selector should use entirely , needs. first group above valid in terms of selecting want, specificity respect other selectors , other rules have can factor how they're rendered.