CSS SIGNS

http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors

CSS Child vs Descendant selectors

up vote163down votefavorite 28

I am a bit confused between these 2 selectors. Does the descendent selector: div p select all p within a div whether or not it's an immediate descedent? So if the p is inside another div it will still be selected? Then the child selector: div > p Whats the difference? Does a child mean immediate child? Eg. <div><p> vs <div><div><p> will both be selected, or not? css css-selectors shareimprove this question edited Oct 16 '14 at 17:34 Dan Nissenbaum 3,61022778 asked Jul 25 '09 at 14:28 iceangel89 2,03642549

I've tried to explain here in detail, can refer just incase if its helpful to anyone... –  Mr. Alien Jun 19 '14 at 18:45 add a comment

6 Answers

activeoldestvotes

up vote262down voteaccepted

Just think of what the words "child" and "descendant" mean in English: My daughter is both my child and my descendant My granddaughter is not my child, but she is my descendant. shareimprove this answer answered Jul 25 '09 at 14:46 RichieHindle 115k25215300

20 One important note is that a child selector is going to be faster than descendant selector, which can have a visible affect on pages with 1000's of DOM elements. –  Jakobud Mar 22 '12 at 17:37 45 I hate to be that guy, but I'm sure you mean 'effect'. Oh and by hate, I mean love of course. –  marcusklaasFeb 5 '13 at 13:09  6 It will affect the page, but have an effect on the page. –  Jeff Ryan Jul 29 '13 at 23:42 4 @marcusklaas af·fect noun 4. Psychology feeling or emotion. 5. Psychiatry an expressed or observed emotional response. Used in a sentence: "The page rendered so slowly, it produced a visible affect; my face turned red in anger." :-) –  Patrick M Aug 16 '13 at 4:54  2 @TrevordeKoekkoek right, it would also be a visible effect. In that sentence, as I constructed it, the words are interchangeable without changing the overall meaning. That was my intent. By using 'affect' in that sentence, the meaning is barely more specific; visible affect: the emotion was visible; visible effect: something was visible. The identical pronunciation and highly overlapping meanings are one reason the English language (to use another heavily overloaded term) sucks. –  Patrick M Oct 9 '13 at 17:13 show 3 more comments

up vote29down vote	Yes, you are correct. div p will match the following example, but div > p will not. <div><table><tr><td><p> <!... The first one is called descendant selector and the second one is called child selector. shareimprove this answer answered Jul 25 '09 at 14:31 çağdaş 11.5k23452
	add a comment

up vote15down vote

Bascailly, "a b" selects all b's inside a, while "a>b" selects b's what are only children to the a, it will not select b what is child of b what is child of a. This example illustrates the difference: div span{background:red} div>span{background:green} <div><span>abc</span><span>def<span>ghi</span></span></div> Background color of abc and def will be green, but ghi will have red background color. IMPORTANT: If you change order of the rules to: div>span{background:green} div span{background:red} All letters will have red background, because descendant selector selects child's too. shareimprove this answer edited Dec 24 '13 at 1

------------------------------------------------------------------------------------------------------------------
http://stackoverflow.com/questions/22632786/use-a-space-or-greater-than-sign-in-css-selector

Use a space or greater than sign > in CSS selector? [duplicate]

up vote5down votefavorite	This question already has an answer here: CSS Child vs Descendant selectors 6 answers I have some CSS code: .welcome div { font-size: 20px; } which does what I want it to do, but also writing it like .welcome > div { font-size: 20px; } will do the very same. Is there any reason to use one over the other or are they just two different ways of doing the same thing? css css-selectors shareimprove this question edited Mar 25 '14 at 17:15 Mr. Alien 71.3k1894135 asked Mar 25 '14 at 11:10 Howli 6,299102045
marked as duplicate by Antony, Josh Crozier, chopper, Merlevede, Jan Doggen Mar 25 '14 at 19:35 This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

CSS GREATER SIGN OR WHITE SPACE  SIGN USE
SAME MEANING
-------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
.welcome > div {
font-size: 20px;
color: #f00;
}
</style>
</head>
<body>
<div class="welcome">
<section>
<div>This will be selected</div>
</section>
<div>This will be selected as well</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.welcome  div {
font-size: 20px;
color: #f00;
}
</style>
</head>
<body>
<div class="welcome">
<section>
<div>This will be selected</div>
</section>
<div>This will be selected as well</div>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
span { color: blue; }
div.one span { color: red; }
div.two > span { color: green; }
</style>
</head>
<body>
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
</body>
</html>