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"
Related
I'm trying to make a list that has a different first letter for some of the items in the main menu. I have the first-letter psuedo element working across the list, but don't want it to show on the first and last child in the list.
.main-navigation li a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li a:first-letter {
color: #6a6a6a;
}
I'm using the first part this code to colour the first letter in the menu items, and then the second part to stop the sub-menu items taking that colour.
However, trying to use
.main-navigation li a:first-child:first-letter {
color: #f0f0f0;
}
is giving every first letter in the menu items and sub-menu items that colour, rather than just the first one (Home in my fiddle)
I want Home and Contact Us not to show the orange colour, or else show a different colour (the default one), whichever is easiest. Can someone help?
http://jsfiddle.net/wM9eA/
You need to target the li element with first-child, the same goes for last-child.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter{
color: #f0f0f0;
}
Working Fiddle
You want the first and last li elements.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter {
color: inherit;
}
The problem here is that :first-child applies to the element that it's applied to directly, while :first-letter applies to that element's content. Saying a:first-child will pick the first a inside the li, and there are only one a in each li. We need to apply select that to the li.
Working Fiddle
.main-navigation li:first-child a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li:first-child a:first-letter {
color: #6a6a6a;
}
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.
I have an html menu, that start like this:
<nav id='main'>
<ul>
and my CSS file goes like this:
nav #main ul {
list-style: none;
}
But for some reason, this does not seem to work...
What am I doing wrong?
Try using
nav#main ul {
list-style: none;
}
ie remove the space between nav and #main - using the space is indicating #main is a descendant of nav instead of saying #main is an id attribute of nav
See the docs here for pattern matching in CSS2
Space is descendant selector.
You are trying to apply this style to:
All the <ul> descendants from an object with id="main" that is descendant of a <nav> object.
You should instead apply the style to:
All the <ul> descendants from a <nav> object with id="main".
It can be done removing the first space:
nav#main ul {
list-style: none;
}
Remove the space
nav#main ul {
list-style: none;
}
it really should be
nav#main ul { }
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.
I have one element which is styled by two css documents:
1.
ul[editable="yes"] li {
background:black;
}
2.
#menu li {
background:white;
}
As you might have guessed the element I am styling is an LI which is located in the #menu element.
How can i make the "ul[editable="yes"] li" be dominant over "#menu li"?
Thanks in advance :)
background:black !IMPORTANT;
You can read more about !IMPORTANT here : http://www.w3.org/TR/CSS21/cascade.html#important-rules
I am presuming that #menu wont be the id of ul to whose li child you are trying to target in first case. (Because IDs are unique and if you are giving same ID to different ul, you are doing it wrong).
The solution would be
#menu ul[editable="yes"] li {
background:black;
}