Differences between 'div .class', '.class' and '.class div'

Question

I have a div like : <div class='class'>

I notice that div.class handles this style, while .class div does not. Moreover, .class handles the style as well.

Why is that ?

Answer 1

I notice that div.class handles this style, while .class div does not.

div.class looks for a div with the class class present.

.class div looks for a div that is a descendent of an element with the class class.

Your element is a div with the class class, hence the selector does not select it.

Moreover, .class handles the style as well.

.class will select any element with that class, including any div elements.

Answer 2

A space is a descendent selector, i.e. "Matches the right hand side only if one of its ancestors matches the left hand side".

See the descendant section of Selectutorial

.class works because any element that matches the rule "A div that is a member of the class 'class'" will also match the rule "A member of the class 'class'", it is just less specific.

Answer 3

div.class refers to all divs with the class 'class.' .class div, on the other hand, refers to all divs that are children of the element with the class 'class.' .class refers to all elements with the class 'class.'

Answer 4

1. div.class: Select a div with a class attribute of value "class". Can be written as div[class="class"]
2. .class div: Select a div which is a decendant of any element which has a class attribute of value "class". Can be written as [class="class"] div
3. .class: Select any element which has a class attribute of value "class". Can be written as [class="class"]

Although the dot, fullstop, period, . , is used instead.