Help with CSS syntax please

Discussion in 'Software' started by JustAnotherDude, Jul 4, 2009.

  1. JustAnotherDude

    JustAnotherDude Private E-2

    I'm very inexperienced with CSS, just now learning. I looked at various sites that offer templates, to see how people use the code in the real world. One thing I see from time to time, which I can not find a reference to in any of my books, are lines that look like this:

    body>#content-wrapper {margin-left:0;}

    What is ">#" doing in that line?

    If it matters, #content-wrapper is defined immediately before that line.
    I could not find any reference to that syntax in my 2 books, nor on any of the sites I searched.

    Also, if you can recommend some *good* books (or online tutorials) to help me learn CSS, I would appreciate it. Thanks very much!
     
    JustAnotherDude, Jul 4, 2009
    #1
  2. DevGeek

    DevGeek Private E-2

    DevGeek, Jul 9, 2009
    #2
  3. JustAnotherDude

    JustAnotherDude Private E-2

    Thank you for your reply. I believe I understand the use of the # character. It is the use of the > character (which in this case was immediately before the # character...

    body>#content-wrapper {margin-left:0;}

    That line is copied directly from the CSS template (nothing missing, nothing added), and from time to time I find other similar CSS code with a > character used the same way. I do not understand why it is used there, and I have been unable to find a reference to it in any of the books I have.

    Thanks for any advice you can offer.
     
    JustAnotherDude, Jul 9, 2009
    #3
  4. DevGeek

    DevGeek Private E-2

    Hmm i think that means parent/child,maybe its new syntax or something,i thinks its the same as html body #content-wrapper {margin-left:0;},but IE doesnt support that so use html body #content-wrapper {margin-left:0;} instead of html > body > #content-wrapper {margin-left:0;}
     
    DevGeek, Jul 9, 2009
    #4
  5. w3d

    w3d Private E-2

    Just to clarify...

    # is the ID selector (not restricted to DIVs).
    eg. #myelement {/* some styles */}
    Matches the element whose ID="myelement". The ID must be unique in a document. (Whereas the CLASS can appear on more than one element.)

    > is the child selector (immediate child of).
    eg. p > em {/* some styles */}
    Matches all em's that are direct childern of (are contained within) the p element. So this would be matched:
    <p>Blah blah <em>THIS WOULD MATCH</em> blah blah.</p>

    However, this would NOT match:
    <p>Blah blah <strong><em>THIS WOULD NOT MATCH</em></strong> blah blah.</p>
    Since the em is now a child of the strong element, it is no longer a direct child of the p element. However, it is still a descendant of the p (see below). IE6 (or IE5.5) does not support this selector, IE7+ and other browsers do.

    This contrasts to the standard descendant selector (a space)
    eg. p em {/* some styles */}
    This would match any em that is contained within any p element, no matter how many levels down it occurs. Both examples above would be matched. All browsers support this.

    In your example:
    body>#content-wrapper {margin-left:0;}
    This looks like a hack to me, since you say #content-wrapper is already defined above this. This rule will be ignored by IE6 (and IE5.5) - which I would assume is the intention of the developer.
     
    w3d, Jul 25, 2009
    #5

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds