What's the different between this two styling

Hey guys,

What can you tell the different between these two guys. I never pay attention to them until my recent project:

#mydiv img vs #mydiv > img

Thank you,

 

Consider this:

<div id="mydiv">
    <img alt="John's photograph" src="john.jpg">
    <span>
        <img alt="Jane's photograph" src="jane.jpg">
    </span>
</div>

HTML:

To frame John's with red and Jane's with blue, you may want to use:

#mydiv img{ /* this makes both John's and Jane's blue */
    border: 2px solid blue;
}
#mydiv > img{ /* overwrites above CSS rule (for John's) , makes it red instead */
    border: 2px solid red;
}

Code (CSS):

Ref:
http://www.w3.org/TR/CSS21/selector.html#child-selectors

 

Thank you,
That's crystal clear.

 

You're welcome

 

Just a tip, ">" is typically used by people who didn't really grasp inheritance. As a rule of thumb, you should refrain from using all those seemingly fancy but absolutely pointless selectors if you did.

 

Umm, I don't know wiicker95.
To me this child-selector ">" is pretty standard as it has been part of the older CSS.2.1 Spec. for long time. Perhaps you're talking about the pseudo selectors of CSS.3? They are fancy alright, and I seldom use them.

HEndra

 

Uhm, not all browsers will it work as written above... you aren't supposed to have spaces around the > since space is itself a selector method. They should just be:

#mydiv>img

... and wiicker95 has it right too, that fancy selectors are 99%+ of the time just doing it backwards and/or wrong -- and of course there's the lack of legacy browser support to content with (if you care).

Take @hdewantara's example code, where the same thing could be written:

#mydiv img{
    border: 2px solid red;
}

#mydiv span img
    border: 2px solid blue;
}

Code (markup):

Just simply flip the logic around the other way. Usually if you need the fancier selectors, you're probably doing something wrong.

 

Thanks for additional information. If it that bad, I'll rewrite my code according to @deathshadow suggestion and see if it worked in all browsers. @hdewantara's method is working fine.

I've a structure which look like this:

<div id="granddad">
   <img src="granddad.png" />
   <div class="clear">
     CONTENT CONTENT CONTENT
   </div>
   <div id="father">
     <div id="son">
       <div id="grandchild">
         <div id="greatgrandchild">
           <img src="greatgrandchild.png" />
         </div>
       </div>
     </div>
   </div>
</div>

Code (markup):

And I style it like this:

#granddad {
   width: 640px;
}
#granddad img {
   width: 100%;
}

Code (markup):

All the images inside this #granddad box stretched to its full width.

 

Both images should be 640px according to that CSS... since that's the width of the parent. Is that what you were trying to do, or did you want to target the images, NOT all images?

#granddad img {
   width: 640px;
}

#granddad div img {
   width: 100%;
}

Code (markup):

First img 640px, images inside child DIV expand to full width of #granddad (which is NOT fixed) -- is that what you were trying for?

Though honestly, if I had DIV nested that deep with ID's on all of them, I'd put a bullet in my head.

 

No, I want the first image to have 640px of width.
The second image and others will have different width e.g. 100px.
That's only the HTML and CSS part.
@hdewantara method working fine.

Note: It's the laziest way to code to make a responsive site for 5 different screen size.

 

#granddad img {
   width: 640px;
}
#granddad div img {
   width: 100px;
}

Code (markup):

Funny, I would just leverage the existing elements if possible so I'm not adding extra code for nothing... though we're looking at a snippet, not a real content filled codebase -- so the whole picture isn't there. I usually don't have anything this 'spartan' as a code when playing with DIV, since you then have no semantics and no content; once again putting the cart before the horse.

But hey, to keep it in perspective, even the 'class="clear"' makes my teeth hurt.