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
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have two elements inside a wrapper div. The second sibling in the view sometimes get an active class (as per the logic of UI)
<div id="wrapper">
<div>some content</div>
<div class="active">some other content</div>
</div>
In those cases (when second child has an active class) - How can I target the 1st div from a css selector.
I've tried general sibling of the active div
.active ~ div
But this doesn't work since the target div should follow the selected div and should not be before it.
How to target a div which comes before another active div.
You can target the div which is not active (inside wrapper class)
.wrapper {
> div:not([class='active']) {
// apply styles
}
}
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>
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/
I have some markup like this:
<div class="field">
<div class="selector" id="uniform-blablabla">
[select tag markup]
</div>
<div>
<div class="field">
<input type="text" id="etcetc"
</div>
I'm looking for a css selector that will select the input tag above based on the fact that its containing .field div is preceded by a .field div containing a div with a .selector class, as in the markup above. I've tried
div.field > .selector + div.field > input
but that doesn't work, I assume because the input tag isn't a sibling of the div tag with the .selector class and I really need their parents to be siblings.
I've read up on some of the interesting reasons that CSS doesn't support any sort of "parent" selector, and I can see why. I'm wondering if there's another way to accomplish this, short of putting a class on each input tag that follows a selector. Is there?
I'm wondering if there's another way to accomplish this, short of putting a class on each input tag that follows a selector. Is there?
Not with a CSS selector. You will have to add an extra class based on the preceding sibling div having div.selector as a child.
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.