I am learning CSS and facing a issue while applying the style rule for "a" tag. I have a navigation containing unordered list containing list items which contains link. On hovering on the "li" tag, I want to change the color of the text inside the "a"tag. The below is the code I added for applying the css rule.
#top-nav ul >li:hover a{
color: #FFFFFF;
}
But this rule is applied to all the Links on the page. How can I ensure that the rule applies to all the direct links within the #top-nav ul > li and not all the child elements under #top-nav ul > li
Currently the above rule is being applied to #top-nav ul>li and li elements deep inside the div tag under the li tag
Add a direct descendant selector after hover.
#top-nav ul > li:hover > a
Related
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.
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?
On the following test site (http://tronitech.brettatkin.com/index.asp), I want each navigation element to have a different look when it is the active page.
I have assigned a class to the anchor element when that page is active.
When I add the CSS inline, it works (the home page for example), but when I drop it in a class it doesn't.
Here is my CSS:
#navigation ul li .active-link a {
color: #326ea1;
background-image: url(/images/nav-current.jpg);
background-repeat: repeat-x;
}
I think it is something with inheritance, but I'm not seeing the issue...
Thanks
Brett
Change your selector to the following
#navigation ul li a.active-link
a .active-link tries to match an anchor tag with a child that has class active-link. a.active-link matches anchor tags with class active-link.
it's not #navigation ul li .active-link a but it should be #navigation ul li a.active-link. The first rule says link that is decendant of class active-link whlie second says link with a class active-link - which is what you've got in your markup.
In fact both selectors are way too long.