How do i write the same when the ul is a class instead of id?
ul#Menu li a{}
ul.Menu li a{} not working properly
That's exactly right, so if it isn't working the problem is in some of the code you aren't showing us
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.
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.
Is there a way to merge this selector:
ul#social_footer li a:link,
ul#social_footer li a:visited {}
I want the same selector for the ul with ID #footer_navigate to be selected for both anchor states.
Is this the only way to do it?
ul#social_footer li a:link,
ul#social_footer li a:visited,
ul#footer_navigate li a:link,
ul#footer_navigate li a:visited {}
You could, on the assumption there's no other a elements in there that you don't want to affect, shorten that to:
ul li a:link,
ul li a:visited {
/* css */
}
This approach does present the problem that you'd have to override the given styles for other links that matched by the same selector.
I'd suggest using classes instead, though, to identify those links that share styles:
ul.navigation li a.happyColors:link
ul.navigation li a.happyColors:visited {
/* CSS */
}
Which does, obviously, require editing of the html to add those (or whatever) classes you choose to use instead.
You can add a additional common class at all tag ul that should have your two selector.
In this case you can use only this css:
ul.*commonClass* li a:link, ul.*commonClass* li a:visited {}
<ul id="social_footer" class="*commonClass*" >...</ul>
<ul id="footer_navigate" class="*commonClass*" >...</ul>
Maybe like this :
ul#social_footer li a:link, ul#social_navigate li a:link{
}
ul#footer_footer li a:visited, ul#footer_navigate li a:visited{
}
I know you have found adding a class as an acceptable answer (and it is). You may also want to check out lesscss as a way to programmatically apply css stylings.
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.