What is the difference between ".class element" and "element.class"?

Question

Is there a difference between .class element and element.class in a CSS selector?

I had always been shown element.class but just the other day came across a CSS file at work that had .class element and wanted to know if this was just a style choice (in which case I would make my changes match), or if there was a specific reason (in which case I would not necessarily want to make my changes match).

Answer 1

element.class selects all <element />s with that class. .class element selects all <element />s that are descendants of elements that have that class.

For example, HTML:

<div class='wrapper'>   <div class='content'></div>   <div></div>   <div class='footer'></div> </div> 

For example, CSS:

div.wrapper {   background-color: white; /* the div with wrapper class will be white */ }  .wrapper div {   background-color: red;   /* all 3 child divs of wrapper will be red */ } 

Answer 2

"element.class" selects elements that have the given class.

".class element" selects all elements that are children of anything with the given class.

Example:

<div class="foo">     <p>...</p> </div> 

div.foo would select the div, while .foo p would select the child paragraph. It should be noted that without specifying direct child via the ">" selector, this will traverse the entire document tree when looking for children.