1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What's the different between this two styling

Discussion in 'HTML & Website Design' started by ketting00, Apr 22, 2014.

  1. #1
    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,
     
    Solved! View solution.
    Last edited: Apr 22, 2014
    ketting00, Apr 22, 2014 IP
  2. #2
    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
     
    hdewantara, Apr 22, 2014 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thank you,
    That's crystal clear.
     
    ketting00, Apr 22, 2014 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    You're welcome:)
     
    hdewantara, Apr 22, 2014 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    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.
     
    wiicker95, Apr 23, 2014 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    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
     
    hdewantara, Apr 23, 2014 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    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.
     
    deathshadow, Apr 23, 2014 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #8
    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.
     
    ketting00, Apr 23, 2014 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    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.
     
    deathshadow, Apr 23, 2014 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    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.
     
    Last edited: Apr 23, 2014
    ketting00, Apr 23, 2014 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    #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.
     
    deathshadow, Apr 23, 2014 IP