This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.
which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?
#shape > div{
}
Actually A > B is a specialization of the more generic A B:
A B will apply to any element B being somewhere inside an element A.
A > B will only apply to elements B who are direct children of an element A.
Simple example:
CSS
.a .b {
color: red;
}
.a > .b {
color: blue;
}
HTML
<div class="a">
<div class="b">Hello</div>
<div class="c">
<div class="b">World!</div>
</div>
</div>
You can try this example right here at jsFiddle.
As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.
This selects any DIV that is a child of the element with the ID shape.
this applies the styles to divs which are direct children of element with id #shape
Demo: Fiddle
in the demo the style is not applied to section > div because the container div is not a direct child of #shape
> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape
Demo : http://jsfiddle.net/JDs9G/
Related
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 5 years ago.
I learn css3 selectors, and i can't understand what is the difference between the following selectors:
div > div
div + div
div ~ div
Can somebody help me?
element>element
for example : div > p
Selects all elements where the parent is a element
element+element
for example :div + p
Selects all elements that are placed immediately after elements
element1~element2
for example : p ~ ul
Selects every element that are preceded by a element
see this like for all css selectors:
https://www.w3schools.com/cssref/css_selectors.asp
div > p Selects all p elements where the parent is a div element
div + p Selects all p elements that are placed immediately after div elements
p ~ ul Selects every ul element that are preceded by a p element
Here's a complete reference to all selectors https://www.w3schools.com/cssref/css_selectors.asp
A simple example
div > p{
color:blue;
}
div+p{
color:green;
}
#para ~ p{
color:red;
}
<div>
<p>Hello, im a child of div</p>
</div>
<p id="para">Hello, im adjacent to a div</p>
<p>Hello, im preceding to a div</p>
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 question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does “>” mean in CSS rules?
CSS has the following two syntaxes which seem to be doing the same thing. Selecting a nested element.
div span
div > span
Am I missing something, or are these two indeed equivalent selectors ?
No, they are not equivalent. The first one is the descendant selector, while the second is the child selector.
Quick example:
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
With this markup .a > .c will select nothing, while .a .c and .a > .b > .c will select the innermost element.
div span
Will select any span that is inside any div. This could be multiple levels deep.
div > span
Will only select any spans that are the direct descendants of a div.
More info about child selectors -> http://meyerweb.com/eric/articles/webrev/200006b.html
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>