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.
Related
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.
Kind of hard to explain, so here's some code.
So I have this CSS, which makes all links an orangish color. It encompases the entire page.
#pageContent a:link,a:visited, a:hover, a:active {
color: #EE4036;
}
And then I have an element of id sideMenu somewhere within the pageContent id,
#sideMenu a:link, a:visited, a:hover, a:active{
color:#58595B;
}
The problem is that for some reason sideMenu's given link color is overwriting pageContent's link color for links that aren't children of sideMenu.
for example, if I had
<div id="pageContent" >
<a>this text should be #EE4036</a>
<div id="sideMenu">
<a>this text should be #58595B</a>
</div>
</div>
sideMenu's <a> text content would get set to the color #58595B as expected, but so would pageContent's, which is what I wouldn't expect.
I'm a bit new to CSS so I feel like I'm missing some super obvious rule and google isn't helping at all. So, anyone know what's going on?
You would need to prefix each selector with the ID:
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color:#58595B;
}
Currently, your selector says match "links that are descendants of an element with ID "slideMenu", links that have been visited, links that are being hovered, and active links".
Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.
Well, you are actually redefining the same rule. You must write down each time the #sideMenu or #pageContent. Here it is:
#pageContent a:link, #pageContent a:visited, #pageContent a:hover, #pageContent a:active {
color: #EE4036;
}
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color: #58595B;
}
Voila. Hope it helps.
Is there a way of specifying a:link, a:visited, a:hover, a:active and maybe also a:focus in one go using css?
If you want to style all anchors; not just anchors used as links, but named anchors as well (i.e. <a name="foo"></a>) simply use the following css selector:
a
That's it.
If you don't want named anchors, but instead want to style only links that have an [href] attribute, you should use the comma-separated list of selectors:
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: blue;
}
If you're running into specificity issues, you'll need to post some HTML code and review CSS specificity.
Just name them all at once and specify the style:
a:link, a:active, a:visited, a:hover, a:focus
{
}
If you specify a single style for all states, you can simply do this:
a{
color: green;
}
i have problem with a:visited and a:link for 2 class/id.
#title a:link, #title a:visited {
color:black;
}
#PageCounter a:link, #PageCounter a:visited {
color:green;
}
output:
all link of #title and #PageCounter are color black.
but i want #PageCounter all on color green.
i did tried test with "#title:visted" and "#title :visited" and "#title visited"... is not work. =/
(example)HTML format:
<div id="title">Hello World</div><br><br>
<font id="PageCounter">1,2,3,4,5,6,7,....</font>
Are the anchor tags direct descendants of the elements with the IDs 'title' and 'PageCounter'? If so, you might want to use the child selector:
#title > a:link, #title > a:visited {
...
}
#PageCounter > a:link, #PageCounter > a:visited {
...
}
The selectors you show in your question will affect any anchor elements within the elements identified by 'title' and 'PageCounter', regardless of how deeply nested they are. It might be possible that one of those selectors is 'hiding' the other. Using the child selector makes it more explicit.
I want to apply same style to
a, a:hover
of elements residing inside an id, class and element. What's the most valid and effective syntax?
Example:
#leftmenu .shortcuts ul li a, a:hover {
text-decoration: none;
}
Regards,
//t
CSS isn't that smart, so you'll have to explicitly write out that first part, again. As #sdleihssirhc noted, you can omit li, as ul elements are assumed to already contain lis, so the selector would still work:
#leftmenu .shortcuts ul a,
#leftmenu .shortcuts ul a:hover {
text-decoration: none;
}
I'd consider giving that ul an id, as it would condense your CSS considerably:
#lm_ul a, #lm_ul a:hover {
text-decoration: none;
}
or you could just do something similar to apply to all links inside a container with an id="leftMenu"
CSS:
#leftMenu > * a, #leftMenu > * a:hover{ .... }
HTML:
<ul>
<li><span><a>item1</a></span></li>
<li><p><a>item1</a></p></li>
<li><div><a>item1</a></div></li>
<li><em><a>item1</a></em></li>
</ul>
This will take into account every element a no matter what is wrapping the links inside the container with id="leftMenu"