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?
No they are completely different, using > selects a child element whereas using a space will select a nested element at any level.
For example…
Using ␣/space in the selector…
<div class="welcome">
<section>
<div>This will be selected</div>
</section>
<div>This will be selected as well</div>
</div>
So here, the selector having space will target the div at any nested level of the parent element.
Demo (Using ␣/space)
.welcome div {
font-size: 20px;
color: #f00;
}
Using >
<div class="welcome">
<section>
<div>This won't be selected</div>
</section>
<div>This will be selected</div>
</div>
Whereas here, the selector will target your div which is a child of the element having .welcome but it won't select the div which is nested inside section tag as it is a grandchild (but not a child) of the outer div.
Demo 2 (Using >)
.welcome > div {
font-size: 20px;
color: #f00;
}
From MDN : (For ␣)
The
␣combinator (that's meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.
From MDN : (For >)
The
>combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.
They mean two different things.
.welcome div means select any div which is a descendant of .welcome. So it would select all of these div elements:
<section class="welcome">
<div>Me</div>
<div>And me
<div>And me
<div>And me too!</div>
</div>
</div>
</section>
.welcome > div only selects a direct child div of .welcome. So:
<section class="welcome">
<div>It selects me</div>
<div>And me
<div>But not me
<div>And not me either!</div>
</div>
</div>
</section>
Have a read of http://css-tricks.com/child-and-sibling-selectors/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Taken from the W3C CSS reference,
E F
Matches any F element that is a descendant of an E element.
whereas
E > F
Matches any F element that is a child of an element E.
A child is only the next generation. A descendant is a individual in any following generation.
.welcome div will affect ALL divs inside the "welcome" class... if you use the selector ">" it will affect JUST the children of "welcome".
as an example:
<div class="welcome">
<div class="one">
<div class="two">
</div>
</div>
<div class="other">
</div>
welcome div will affect "one", "two" and "other"
welcome > div will affect just "one" and "other"
.welcome div
Selects all elements inside a an element with "welcome" class
.welcome>div
selects all elements where the parent is an element with ".welcome" class
if you use
.welcome div
{
font-size: 20px;
}
css will applied to all div descendants of .welcome
if you use
.welcome > div
{
font-size: 20px;
}
css will be applied only to direct child divs and not their descendants
please find link http://jsfiddle.net/65rL6/
Hope it helps!
