In CSS, are the selectors div > a and div a the same?
<div>
<a>Hi</a>
</div>
It isn't. "div > a" is a child selector; it means "an a element that's an immediate child of a div". "div a" is a descendant selector; it means "an a element that's a descendant of a div" (a child, or the child of a child, or the child of a child of a child, ...). All child elements are, of course, descendants; but not all descendants are children.
So for instance:
<div>
<a href='http://www.google.com'>Google</a>
</div>
matches both div > a and div a (the a is a child element of a div, and of course all child elements are also descendant elements).
But:
<div>
<span>
<a href='http://www.google.com'>Google</a>
</span>
</div>
...doesn't match div > a but does match div a, because the a is a descendant but not an immediate child (there's a span in-between).
Live example
It's not.
<div><h1><a>some text</a></h1></div>
In the HTML above, div > a will not select the <a> because it's not a direct child of <div>.
They're not the same.
No, they are not the same. The first selects only a elements that are children of div elements, while the second selects all a elements that are descendants of div elements, e.g. <div><p><a>...</a></p></div>.
Related
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1
That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.
An illustration comparing the child combinator with the descendant combinator:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
Which elements are matched by which selectors?
Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
> (greater-than sign) is a CSS Combinator.
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
More information about CSS Combinators
As others mention, it's a child selector. Here's the appropriate link.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It matches p elements with class some_class that are directly under a div.
All p tags with class some_class which are direct children of a div tag.
( child selector) was introduced in css2.
div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
For more information on CSS Ce[lectors and their use, check my blog,
css selectors and css3 selectors
html
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
css
div > p.some_class{
color:red;
}
All the direct children that are <p> with .some_class would get the style applied to them.
The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.
An example:
article > p { }
Means only style a paragraph that comes after an article.
I have question how work first-child and last-child with elements and classes?
Look on my example
And for it I have some question:
Why this rule not working:
p.test1:first-child{
color: green;
}
How then change color of first element with class test1?
Why this rule working if is similar to example 1:
p.test1:last-child{
color: white;
}
The :first-child CSS pseudo-class represents any element that is the
first child element of its parent.
The :last-child CSS pseudo-class represents any element that is the
last child element of its parent.
References:
http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child
1- In your example p.test1 is not a first child element of its parent, so the selector doesn't select any element.
2- .test1:nth-of-type(4) Update, replaced 4 instead of 1, not quiet a solution, Ref:http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo
3- Because it is the last child element of its parent.
Note: the parent here in your example is the body tag.
Example in question for future reference:
<p>test</p>
<p>test</p>
<p>test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
The first-child/last-child is in relation to the parent element. In your example there is no p.test-element that is the first child of its parent element (The JsFiddle container). Instead the first-child is a plain p-element. If you set the .test-class on the first p-element it turns green.
This may be a basic question but to me it is still confusing where I can use + or > in CSS.
I see many selectors like li > a or div + span etc. but I am not sure what the difference is and when to use them?
The > sign means select a direct descendant
Example:
CSS
div > ul {
list-style: none;
}
HTML
Here the style would apply to the <ul>
<div>
<ul>
</ul>
</div>
The + sign means select an adjacent sibling
Example:
CSS
p + p
{
font-weight: bold;
}
HTML
Here the style would apply to the latter <p>
<div>
<p></p>
<p></p>
</div>
The selectors are extensively explained in the W3 CSS spec, but here is a digest:
Immediate child selector
The > selector is the immediate child selector. In your example li > a, the rule would select any <a> element that is an immediate child of an <li> element.
The rule would select the anchor in this example:
<ul>
<li>An anchor</li>
</ul>
The adjacent sibling selector
The + selector is the adjacent sibling selector. In your example div + span, the rule would select any <span> elements that is immediately preceded by a <div> element, and where they both share the same parent.
The span element would be selected in this case:
<article>
<div>A preceding div element</div>
<span>This span would be selected</span>
</article>
The > is the direct child selector. In your example of li > a, this will only select <a> tags that are direct descendants of the <li>.
The + means siblings of the selected elements. In your example, div + span would select any <span>s next to a <div> (with the same parent).
li > a would only select a elements that are direct descendants of li elements. div + span would only select span elements that follow a div element.
Read more in #bažmegakapa's link: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
I'm not sure about the + sign but the > sign in css means direct child of, consider this
div > h1 { color: red; }
This will style all h1 tags that are a direct child of a div.
<h1>BLAH</h1>
<div>
<h1>BLAH</h1>
</div>
In that case the first h1 would be left alone, the second because it is a direct child of the div tag would be red.
I have the following set up
.test div:first-child {};
<div class="test" id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
Somehow div#three inherits the first-child styles, even though it is not the first-child of div.test. Is this intentional by the browsers? Can someone explain this?
While #two is the first child of #one but #three isn't, #three is still the first child of #two. So both inner divs get the styles.
The descendant combinator (the space character) in your selector tells the browser to select any div in any level of nesting from .test, as long as it's contained somewhere within an element with that class. The :first-child pseudo-class says to only select an element if it's the first child of its parent, whatever that parent may be, not just the element represented on the left side of the combinator.
If you only want to target the first child of .test, use the child combinator >:
.test > div:first-child {}
Because > expresses a parent-child relationship, it is safe to imply that the parent concerned by div:first-child is represented by .test.
This is the intended behaviour. You need to write your CSS rule like this:
.test > div:first-child
The > ensures only the first child of the .test element is selected. Without it, any div that is the first child of any node within .test is selected.
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?
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.
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.
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.
In theory:
Child => an immediate descendant of an ancestor (e.g. Joe and his father)
Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)
In practice: try this HTML:
<div class="one">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
<div class="two">
<span>Span 1.
<span>Span 2.</span>
</span>
</div>
with this CSS:
span { color: red; }
div.one span { color: blue; }
div.two > span { color: green; }
http://jsfiddle.net/X343c/1/
Be aware that the child selector is not supported in Internet Explorer 6.
(If you use the selector in a jQuery/Prototype/YUI etc selector rather than in a style sheet it still works though)
div p
Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element
div > p
It means immediate children
Selects all 'p' elements where the parent is a 'div' element
div > p matches ps that have a div parent - <div><p> in your question
div p matches ps that have a div ancestor (parent, grandparent, great grandparent, etc.) - <div><p> and <div><div><p> in your question
CSS selection and applying style to a particular element can be done through traversing through the dom element
[Example
Example
.a .b .c .d{
background: #bdbdbd;
}
div>div>div>div:last-child{
background: red;
}
<div class='a'>The first paragraph.
<div class='b'>The second paragraph.
<div class='c'>The third paragraph.
<div class='d'>The fourth paragraph.</div>
<div class='e'>The fourth paragraph.</div>
</div>
</div>
</div>