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.
Related
I have read what MDN says about the child combinator:
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
What I don't understand is why the other two <li> elements are red, too.
.list > li:hover{
color:red
}
<ul class="list">
<li>I should be red
<ul>
<li>Why I am red too？</li>
<li>Why I am red too?</li>
</ul>
</li>
</ul>
With .list > li you are also including all the children of the parent list (which includes the second ul)
One way of overriding that is by explicitly setting the properties of the second list:
https://jsfiddle.net/6yeh6ggL/4/:
.list li a:hover{
color:red
}
.list ul li a:hover{
color:black
}
Just to help clarify a little.
Your selector is finding the li item you want which is the first one (it is only finding that one). The reason all the li's turn red is because color is set to the first li which is inherited by its children and in the case above those li's are its children.
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.
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)
I want to check if the current li has a ul, if so apply style to the li. is there a way to do this in css?
Using jQuery to do it is simple. $('li').has('ul').css('background-color', 'red');
CSS Tricks discusses what you want here - it's called parent selector, and it's not a great idea to implement. Generally I'll use jQuery to apply styles to a parent if the child exists.
are you wanting to know if an element (li) has a certain child element (ul), and if so, style the parent element (li)?
if so -- no, there is no way to style a parent based on it's children in pure css. However, jQuery has selectors that allow you to get nodes that match this pattern, which you can then apply styles to.
The following applies styles to the child uls of a li:
li ul li { color:red }
http://jsfiddle.net/bkC36/
To check if a clicked li has a ul inside of it you need JavaScript
This rule should apply a style to any li that has a ul at any level bellow it.
ul li {/* */}
If you want to style a li that has a ul directly bellow it you can use this rule
ul > li {/* */}
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