Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Understanding "child" concept...

    Hi all,

    I'm trying to get a grip on the "child" concept with css.

    If I understand it correctly...

    Wouldn't

    #main p {
    blah: blah;
    }

    Be the same as:

    #main > p {
    blah: blah;
    }

    Or did I miss it. :\

    And I as I was reading about this I found this excerpt:

    "To select all paragraphs that are children of the <body> tag, you would write:
    body > p { background-color : #00f; }"

    Would this also affect the paragraphs in any div or other element within the body tag? Or does it mean any paragraph that is NOT in an element?

    Is there such a thing as "grandchild"? And what is the practical use of these "child" selectors?

    I would appreciate any clarification any of you would care to offer.

    Thanks
    Dodge

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    The practical use is formatting only certain instances of a given tag, such as only <p> tags that are in a list.

    Dan (HTH)
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The child selector ( > ) is used to select direct children of an element. Take for example the following code.
    Code:
    body p { color: red; }
    
    body > p { color: red; }
    The first statement will give every single paragraph in the page red text. The second statement, on the other hand will only color the text of the direct children of the body red. This means that if there is a paragraph inside of say a div, that text will not be colored red because it's not a direct child. That probably didn't help much, maybe this website will. [http://css.maxdesign.com.au/selectut...child.htm&#91;]

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, a quick example:
    Code:
    <body>
    <div><p>body&gt;div&gt;p</p></div>
    <p>body&gt;p</p>
    </body>
    A rule with the selector body p will affect both of those p elements because they are both decendants of the body.

    A rule with the selector body>p will affect the second but not the first p because the first is not a direct child of the body, it's a child of the div that is a child of the body.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah... I think I understand a bit better now. That seems like a handy tool for us to use.

    Thanks for the replies everyone!

    And I noticed in the link that Antoniohawk provided that some of the later versions of IE do not support the child selectors... is that why I see this type of selector used for IE "fixes" sometimes? Where 2 properties are defined one using the child selector for the browsers that support them - then another property without for IE?

    Thanks
    Daf

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by Dodge
    And I noticed in the link that Antoniohawk provided that some of the later versions of IE do not support the child selectors... is that why I see this type of selector used for IE "fixes" sometimes? Where 2 properties are defined one using the child selector for the browsers that support them - then another property without for IE?
    Yes, but it's not quite that simple. The specificity of the selectors come into play here. The body p selector is of the same specificity as the body>p selecor, so the order determines what will take priority. The one latest in the source code order wins. If you're just going to filter modern browsers, it's better to use a selector that adds specificity, such as html>body p. If you on the other hand want to target only ie, you can instead use a selector such as * html body p that also adds a level of specificity. (* doesn't add to specificity, but html does)
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again!!

    Dodge


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •