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>
Related
This question already has answers here:
What is the difference between these two style rules? [duplicate]
(2 answers)
CSS Child vs Descendant selectors
(8 answers)
Closed 4 years ago.
I have found two selectors
div p
and
div>p
What is the exact difference between these two css selectors?
The first is "descendant" selector: p anywhere inside div
div p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>
The second is "child" selector: p directly under div
div > p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>
div p this style will select all the p elements under the div whether the p is inside another div.
The div>p will only select the p which are under the div. if there is another div into the same div which has p element as well it will not select that p.
This question already has an answer here:
Why doesn't this CSS :first-child selector work?
(1 answer)
Closed 8 years ago.
The first-child selector on dd is not working, why?
<dl>
<dt>definition term</dt>
<dd>description</dd>
<dd>description</dd>
<dd>description</dd>
</dl>
dd:first-child{
/*styling here not work*/
}
demo
You should use :first-of-type pseudo-class instead.
dd:first-of-type {
background-color: gold;
}
UPDATED DEMO.
That's because <dd> is not the first child of its parent.
element:first-child represents the first child of its parent, matching the element. And in this particular instance, the first child of <dl> element is a <dt> element; Not a <dl>.
From the MDN:
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
Which the term of type refers to the HTML element type. Hence dd:first-of-type selects the first <dd> element in the children tree of its parent.
Alternatively, In this particular case you could select the first <dd> element by using adjacent sibling selector as: dt + dd. (Demo).
For cross browser compatibility (<=IE8), you could even use:
dt + dd {
display:none;
}
demo:
http://jsfiddle.net/seemly/N4Jqg/5/
It should be
dd:first-of-type{
display: none;
}
Updated fiddle here.
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'm currently reading Charles Wyke-Smith's book "Stylin' With CSS".
He has one section where there is nav.menu > ul {} AS WELL AS nav.menu ul {}.
What's the purpose of the > selector?
http://www.w3.org/TR/CSS2/selector.html
Quick Explanation:
E > F Matches any F element that is a child of an element E.
More detail from the same source:
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children
of BODY:
body > P { line-height: 1.3 } The following example combines
descendant selectors and child selectors:
div ol>li p It matches a P element that is a descendant of an LI; the
LI element must be the child of an OL element; the OL element must be
a descendant of a DIV. Notice that the optional white space around the
">" combinator has been left out.
For information on selecting the first child of an element, please see
the section on the :first-child pseudo-class below.
It selects immediate children, as opposed to descendants at any point in the hierarchy.
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.