I'm having trouble trying to understand why there is a selector after the :hover pseudo class, and not before it. How and why does this work?
This works
div li:hover > ul
{
display: block;
}
Why wouldn't this work?
div li > ul:hover
{
display: block;
}
I've done many searches trying to figure out why to put a selector or selectors after it( :hover pseudo class); and the details of how it targets it, but I just can't seem to find any information about it. Thank you in advanced!
Your selectors are logically different.
li:hover > ul matches a ul inside of a hovered li.
li > ul:hover matches a hovered ul inside any li.
Your uls are probably hidden by default, so li > ul:hover isn't going to match anything.
In contrast, li:hover > ul matches the still-hidden ul as soon as the li is hovered, and shows it.
Related
www.pureelysium.com/Pure/index.html
Hi there
i tried removing the last both by using both the n-th child and the last-child like so
nav ul li a.last-child {border-right: none;}
I also tried
nav ul li:nth-child(n+3) {
border: 0;
}
Im stumped! Can anyone advise why this wouldnt work?
Your last-child syntax is incorrect. Should be:
nav ul li a:last-child {border-right: none;}
However, it won't work in your case. You have to use that one:
nav ul li:last-child a {border-right: none;}
last-child, nth-child and similar works always in context of parent, so nav ul li a:last-child looks for <a> that is the last child of it's parent: <li> in your case. But you'd like to select <a> within the last <li>. That's why you have to put :list-child after li, not the a.
im trying to construct my own navigation bar, Ive seen some forum with (css), and then im stuck of this css line,
#navbar li:hover ul, #navbar li.hover ul {
i know that the #navbar is the id name,#navbar li:hover ul i think this code said when you hover the mouse in li the ul change and became like this:display: block;position: absolute;margin: 0;padding: 0;. this one is my problem? #navbar li.hover ul whats the meaning of this, then what about on dot(.) before the hover? can some one explain this line , #navbar li.hover ul
I could guess that the rule #navbar li.hover ul was defined for IE6(and previous).
Since that browser doesn't support :hover pseudoclass for elements different than links, probably there is some javascript defined for that browser that is toggling the .hover class on mouseover/mouseenter event.
#navbar li:hover ul
this one means: "the UL inside a hovered LI inside something with ID navbar."
#navbar li.hover ul
this one means: " the UL inside a LI having class 'hover', inside something with ID navbar."
The comma between them means that the following CSS rules apply to both cases.
the "dot" means that it is the class of the li.
I've been reading about this everywhere, and from what I've read to select a list without selecting the nested list. I need to have this
.myclass > ul > li
//or even just
ul > li
I've been trying to get it to work unsuccessfully. The selector is selecting everything, including the nested list. What am I missing?
Please see the code on JS Bin:
http://jsbin.com/asipap/4/edit
some CSS styles are inherited from parent elements unless another style explicitly overrides it, you've set the color for all the list items, but haven't overridden it for any other matched selector. Simply adding li { color: black } should solve the issue.
You need to select the ul that are inside an ul?
.cats, .cats ul{list-style-type:none;}
.test li ul > li{color:red;} /* li ul: an ul inside a li */
This select all nested list, maybe you want to use > to limit the deep.
See it here http://jsbin.com/asipap/16/
This li element matches the .test > ul > li selector. Therefore, all text inside that li will be red, including the ul inside the li.
<li>Test 1.1
<ul>
<li>nested</li>
</ul>
</li>
When writing and referencing elements in my Stylesheets, is
ul#display-inline-block-example li
And
#display-inline-block-example ul li
The same thing? If not what is wrong with one or the other?
No they're not.
The first is applying styles to an li, which is nested inside a ul with id display-inline-block-example
The second is applying styles to an li, which is nested inside a ul, which is nested inside any element type with the id display-inline-block-example
No. The first:
ul#display-inline-block-example li
will target list items within an unordered-list with the id display-inline-block-example.
The second:
#display-inline-block-example ul li
will target list items within an unordered-list whose container (could be anything) has the id display-inline-block-example.
Your second selector says that li is a successor of some ul which has #display-inline-block-example element as an ancestor. This is a different thing.
1.ul#display-inline-block-example li
2.#display-inline-block-example ul li
the first one will target li inside with id="#display-inline-block-example" like
ul id="display-inline-block-example"
li /li - 1.first selector will target this element
/ul
the second one will target all ul li inside element with the id selector "#display-inline-block-example"
e.g:
div id="display-inline-block-example"
ul li /li /ul -
ul li /li /ul - these will get affected if you write styles using this "#display-inline-block-example ul li " selector
/div
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does “>” mean in CSS rules?
I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :
#navigation ul li > ul {
/* some code in between */
}
but when i omit the > sign as
#navigation ul li ul {
/* some code in between */
}
this still works the same way.
what is the difference and when to use > sign ?
> Means the direct child of a selector, so
li > a will ONLY match an <a> which is directly inside an <li> for example.
If the html was <li><span><a> the <a> would not be matched.
Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in
<li><a> but also in <li><span><a>, for example.
Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
The > means a child element - it is the child selector. That is, directly / immediately nested after.
So, in your first example, the ul at the end of the selector must be directly descending from the li.
The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.
selector[1] > selector[2]{
[property]: value
}
This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.
Edit:
The second one you use I believe is called the Descendant selectors.
They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.
You would use > when you want to target a direct descendant.
For example, .foo > .bar would target .bar only if it is the direct child, while .foo .bar would target any descendant of .foo that has the class .bar.
> is to be used when the second operand/element is a child of the first operand/element. When it's omitted; descendants are matched, which includes children.
Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:
#navigation ul {color:red;}
Then both #navigation ul AND #navigation ul li ul will be coloured red (the text) as they BOTH are descendants of #navigation ul.
But if you had the following in your CSS:
#navigation > ul {color:red;}
Then only #navigation ul would be coloured red as it is the only ul which is a direct child of #navigation
The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.
#navigation ul li > ul {
/* some code in between */
}
is more specific than
#navigation ul li ul {
/* some code in between */
}
because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.
> is the child selector.
It will only select immediate children of the previous element. If it there is a
#navigation ul li ul li ul
element it will not be affected by the
#navigation ul li > ul
selector. But the
#navigation ul li ul
will be.
EDIT: #Nix is right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ul ignored but only the span-enclosed? display: block vs inline perhaps? Who knows?