I have this CSS:
a {
color:#19558D;
padding:3px 5px;
text-decoration:none;
}
a:hover {
background-color:#D1E1EA;
color:#19558D;
text-decoration:none;
}
It applies to all links, but what if I don't want it to apply to a specific link on the page? What can I do?
There are two ways you can do this.
First way is to use the :not() selector and give your link that you don't want the styles applied to class:
a:not(.unstyled):hover {
background-color:#D1E1EA;
color:#19558D;
text-decoration:none;
}
However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:
a.unstyled:hover {
background-color:none;
color:#000
text-decoration:none;
}
You can apply your own class or inline style to the link in question.
for example:
<a href="#" class="MyNewClass" />
or
<a href="#" style="color:red;" />
Related
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 7 years ago.
i have a hover effect for the links on my website. i want these to apply to every link EXCEPT ones in a particular div.
Example HTML
<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'"
onmouseout="this.src='_images/_menu/Home.png'"
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>
The CSS i have been trying to us
a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*
a:hover:not(#menu) { *no change*
a:hover:not(#menu.menu_item) { *turns off hover on all links*
a:hover:not(#menu .menu_item) { *turns off hover on all links*
want these to apply to every link EXCEPT ones in a particular div
The standard approach to such problems in CSS is to give the general rule first, then the specific rule to override it. Using :not is a slippery slope and should be reserved for special cases. So:
/* State the general rule first */
a:hover {
background-color: #D6910E;
color: #FFE1A7;
}
/* Give the exception */
.menu_item a:hover {
background-color: transparent;
color: inherit;
}
If you do want to use :not, you have to understand that the predicate applies to the current element:
a:hover:not(#menu)
does not mean a tags being hovered which are not children of #menu; it means a tags being hovered which are not themselves #menu (which will always match). To do what you are trying to do with :not, you would want to try something like
:not(#menu) a:hover
However, this will also not work, because it means "a tags being hovered which have any ancestor which is not #menu", which will also almost always match.
Why you don't make it easier ?
Like
a:hover {
background-color:red;
color:red;
}
#menu .menu_item:hover{
/* Default color */
}
In your case , you can repair it by change the position of "hover"
a:not(.menu_item):hover {
background-color: #D6910E;
color: #FFE1A7;
} /*no change*/
a:not(#menu):hover { /*no change*/ }
a:not(#menu.menu_item) :hover { /*turns off hover on all links*/
a:not(#menu .menu_item):hover { /*turns off hover on all links*/
Hope it 'll help you
<p class="butonat">
<span class="color1">Learn More </span>
I tried the following css but didn't work:
CSS (added from comment post by OP):
.butonat a.color1 {
font-size:16px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#fff;
}
There is a lot of different ways accessing your link via DOM.
Here is couple of code snippets, how you can do it.
.color1 {
color: red;
}
a span.color1 {
font-size: 30px;
}
<p class="butonat">
<span class="color1">Learn More </span>
Your CSS:
.butonat > a {
color:green;
text-decoration:none;
}
.butonat > a:hover {
color:red;
text-decoration:underline;
}
<p class="butonat">
<span class="color1">Learn More </span>
</p>
Use the above way to add the CSS on anchor tag. This way is used to apply the same CSS on a block of class.
You can apply more properties on it also.
UPDATE:
As post the CSS in question:
You need to give the space between a and class name:
.butonat a .color1 {
^^ here need space
Reason: you have not given the space to it is considering that class name is in anchor tag. After giving the space it will consider that class name is in the adjacent tag. so you need to give the space.
EDIT:
After you sent your css, i can see a missing SPACE in your selector:
.buttonat a.color1 this would mean that your a-tag has the class color1
change to
.buttonat a .color1 this will select the children witch class color1 in your a tag
In the below example link 2 comes out white and not black as expected how can I style the color of link two without wrapping it in a container tag?
.text a{
color:#FFF;
}
.black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Your second selector needs to be more specific than the first one to override it:
.text a {
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
It comes out white because the previous selector has higher specificity. One solution in this:
.black{
color:#000 !important;
}
This can cause complex problems if you use it too much, however. Generally the best solution is to try and avoid too many selectors. Have one selector that sets a default style for links, then only use classes to change specific links. For example:
a {
color: #fff;
}
.black {
color: #000;
}
It turns out white because the first selector is much more specific, namely: get a link in an element that has a class "text", whereas the last is merely get any element with the class "black".
You can solve this in two ways:
.text a.black {
color:#000;
}
OR
.black{
color:#000 !important;
}
In which 'important' overwrites other rules that are give to elements with the class "black".
here is working solution you just apply the style to black with id rather than class:
.text a{
color:#FFF;
}
#black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
As others have mentioned, it comes out white because your previous selector for "a" tags is more specific than your "black" class.
There are two options here:
Be more specific:
.text a{
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Or, you could us the "!important" rule:
.text a{
color:#FFF;
}
.black{
color:#000!important;
}
<div class="text">
Link 1
Link 2
</div>
I would strongly advise the first approach, but in some situations, "!important" can be a quick fix until you figure out where the real problem lies. Don't abuse the "!important" rule because it'll mess you up for the future - trust me on that!
Hope this answers your question. Have a good day.
Michael.
I have a simple Css rule like so:
strong a:hover {
text-decoration: none;
}
This works for the following HTML:
<strong>
Go to website
</strong>
The problem is the Wysiwyg within the CMS i am using often puts the code in like so:
<strong>Go to website</strong>
My css rule then doesnt work. Is there are pure Css solution?
Thanks
Al
What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:
Go to website
CSS:
a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }
That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)
Working Example: http://jsbin.com/ekuza5
This should work:
.hrefspan a:hover, strong {
text-decoration: none;}
<span class="hrefspan"><a>...</a></span>
By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.
use
a:hover strong
{
text-decoration:none;
}
since you have define rule strong a:hover
indicates rules to be applied to the a tag which is present inside strong html tag
So the bit you actually want to change is the underling of the anchor
a:hover { text-decoration:none; }
If you want to have this only affect particular links on the page then apply classes to them.
<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>
a.notunderlined:hover { text-decoration:none; }
Is there a reason my below CSS only half works?
div.share
{
position:relative;
top: -4px;
left: 25px;
font-family:Tahoma;
background-color:#000000;
font-size:11px;
font-weight:bold;
}
/* share link css */
a.share:active
{
color: #000000;
}
a.share:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
The div.share CSS is all working but the CSS for the active and hover is not
CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:
div.share a:active
{
color: #000000;
}
div.share a:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
adding your html would make this easier.
I can only guess that you have a <div> with class='share' and no <a> tag with the same.
e.g., does your html look like:
<div class='share'>
<a class='share' href='http://yoursite.com'>Your site</a>
</div>
or
<div class='share'>
</div>
...
<a class='share' href='http://yoursite.com'>Your site</a>
If it's the first, then
div.share a:hover {
...
}
would make more sense.
If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.
Use div.share a:active and div.share a:hover.
The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.
Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?