div li:first-child
what does above css selector target?
First li's of every div on the page
or
All the descendant li's of the div where div is the first child of its parent
The first-child applies to the li. It should select lis that are first children under any div.
The first LI inside a DIV. Example.
1) First li's of every div on the page
Related
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'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.
I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}
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)
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>.