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.
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>
Can someone please translate the following CSS to plain English for me.
#menu ul li:first-child > a:after
#menu ul li:first-child > a:after
Select :after pseudo element inside a element, the a element should be the direct child of li and the li should be the first child of any ul inside any element which have #menu id
Apply the defined styles to the :after pseudo element of all a elements that are children of the first li element inside of all ul elements that are inside an element with id menu.
Or
Selects any content placed after an a element that is a child of a li
element that is a first child that is a descendant of an ul element
that is a descendant of any element with an id attribute that equals
menu.
via SelectOracle
#menu ul li:first-child > a:after
means:
Target the :after pseudo-element (technically, ::after)...
which is associated with an anchor element (a)...
that is a child of a list item (li)...
which is first on the list among siblings (:first-child).
The li must be a descendant (but not necessarily a child) of an unordered list (ul)...
which itself is a descendant of an element with the id value of menu.
i would like a background of my very first div but not all first divs of the divs. The very first div does not have class.
I tried the following css but it does not work, it gives background to all first sub-divs too what i do not want :
.wrapper div:first-child {background: #ff0000;}
or
.wrapper div:nth-child(1) {background: #ff0000;}
Fiddle here !
How to give background color only to my very first div without class name ?
You could use > child selector.
.wrapper > div:first-child {
background: #ff0000;
}
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.
Fiddle: http://jsfiddle.net/ba5gfr27/8/
Reference: MDN - Child selectors
Code:
#navigation > ul > li > a
Descendant and child.
Is "a" child of li, or the holde code.
Or is "a" child li but descendant to the rest. I'm not quite into the rules. Hope you can help me out. :)
You read the selector one by one. Whether you read from left to right or right to left is up to you, but selectors are basically linear.
This selector means:
Select any a element
that is a child of a li element (li > a)
that is a child of ul element (ul > li)
that is a child of an element with the ID navigation (#navigation > ul).
Every element that is a child of its parent is also a descendant of its parent as well as that parent's parents. To put it in simpler terms: an element that's contained within another element is that element's descendant. Note that it's also a child only when it's directly contained within that element (and not something else nested in between) — people often refer to this as a "direct child" for emphasis, but a child is by definition directly contained in its parent anyway.
Thus, the structure of this selector implies the following:
a is a descendant of #navigation, ul and li but only a child of li
li is a descendant of #navigation and ul, but only a child of ul
ul is both a descendant and a child of #navigation
Additional reading:
Descendant selector and child selector from the spec
What does the ">" (greater-than sign) CSS selector mean? (with an illustration)
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.