CODEWITHSUNDEEP
csshtml
LarryF
LarryF

Reputation: 5083

CSS Class Merging

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?

Upvotes: 1

Views: 310

Answers (4)

Ronald Wildenberg
Ronald Wildenberg

Reputation: 32094

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

Upvotes: 0

Tom Ritter
Tom Ritter

Reputation: 101330

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]

Upvotes: 0

Chad Birch
Chad Birch

Reputation: 74558

To get the result that you want, it should be 

.header img.float-right

(no space)

Upvotes: 11

Can Berk G&#252;der
Can Berk G&#252;der

Reputation: 113310

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.

Upvotes: 1

Related Questions