...

View Full Version : Understanding "child" concept...



Dodge
02-22-2005, 08:21 PM
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

whizard
02-22-2005, 10:49 PM
The practical use is formatting only certain instances of a given tag, such as only <p> tags that are in a list.

Dan (HTH)

Antoniohawk
02-22-2005, 11:12 PM
The child selector ( > ) is used to select direct children of an element. Take for example the following 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/selectutorial/selectors_child.htm[]

liorean
02-22-2005, 11:20 PM
Well, a quick example:


<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.

Dodge
02-22-2005, 11:40 PM
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

liorean
02-23-2005, 12:03 AM
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)

Dodge
02-23-2005, 01:13 AM
Thanks again!! :)

Dodge



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum