CSS Class Merging

Question

Can someone shed some light on this issue? The expected result does NOT appear to be happening... Am I correct in my assumptions?

.float-right{
  float:right;
}

.header{
   (stuff we don't care about)
}

.header img .float-right {
  display:inline;
  margin:0 0 0 0.5em;
}

I THOUGHT that would mean that a < img > tag inside a < div class="header" > would get:

float:right;
display:inline;
margin:0 0 0 0.5em;

IF the < img > tag was class="float-right"

Is this correct?

Answer 1

No. .header img .float-right means any tag with the float-right class that is a descendant of an img tag which is in turn the descendant of a tag with the header class.

Answer 2

To get the result that you want, it should be

.header img.float-right

(no space)

Answer 3

IF the < img > tag was class="float-right"

To acheive that there should be no space

 .header img.float-right {

As it is now, it's looking for

 [an element with class "float-right"] [inside an img] [inside an element with class header]

Answer 4

That's what will happen if you remove the space between img and .float-right in your stylesheet.