I'm getting some strange results from one of my selectors.
After a reset, I have some base settings - this being one:
a:not([class]) {
text-decoration:underline;
&:link, &:visited, &:hover, &:active {
color:#primaryColor;
}
&:hover {
text-decoration:none;
}
}
It does the job - partly.
This anchor with no href works
<a class="link-more mt24">Learn more</a>
However this anchor with an href doesn't work.
<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>
By work I mean that the first link correctly gets ignored, the second link isn't ignored even though it has a class.
For completeness, this is what Less is pushing out:
a:not([class]) {
text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
color: #03a9f4;
}
a:not([class]):hover {
text-decoration: none;
}
Any ideas?
The behavior is as expected. a:not([class]) would select and style a elements that don't have the class attribute. So the third a in the below snippet is underlined as it doesn't have class attribute.
The first a doesn't get the underline because a elements without href attribute assigned to it won't get the underline by default. This is because the text-decoration: underline is normally set using a selector like a:-webkit-any-link (WebKit specific, but other UA's will have similar ones).
The second a has the underline because of the default styling (indicated above) that is applied by the UA for a tags. The a:not([class]) does not have any effect on it (that is, it is not the reason for the underline) because the selector won't even point to that element.
If you want all the a elements with class to not have underline then use a[class] and remove the underline.
a[class] { /* if you remove this selector, the second link will be underlined */
text-decoration: none;
}
a:not([class]) {
text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
color: #ff0000;
}
a:not([class]):hover {
text-decoration: none;
}
<a class="link-more mt24">Learn more</a>
<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>
Learn more
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
I've just started using FontAwesome, so far so good. One question though, when I use it with an anchor tag and it has text-decoration:none, and on hover text-decoration:underline. When I hover the link, the icon gets the underline effect, too…how do I get only the link to be underlined, not the icon?
I tried to placing it outside the anchor tag, but it doesn't get the color I assigned to the link
Sample code:
<style>
a{color:red;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<span class="fa fa-camera-retro"> </span>This's a test
Thank you
I popped your exact code into JSFiddle and noticed that the camera icon itself wasn't being underlined completely, but the space between the icon and the text was.
So, if that's what you're experiencing, you can simply add a bit of padding after the icon, that way there's no whitespace to underline.
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.fa {
padding-right: 5px;
}
a:hover .fa {
color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>This is a test
The last item in the CSS was merely to show that no underline effect was happening on hover by changing the icon's color to show formatting wasn't being applied from other items. Notice there's no space after the span tag, instead the space is created by the 5px padding applied to anything with the .fa class.
I tested this in both a very recent version of Firefox, and IE9 because those are what's on my work machine.
I had a similar issue, and found that the fa class defines an inline-block display mode. If I forced the display to inline inside a link, then everything was fine.
a > .fa {
display: inline;
}
Put your <span> outside of the <a> so its not affected by your hover...
<span class="fa fa-camera-retro"></span>This is a test
You can add a style for the a:hover span.fa selector:
<style>
a {
color: red;
text-decoration: none;
}
a:hover span.fa {
text-decoration: none;
}
</style>
<span class="fa fa-camera-retro"></span> This is a test
Is there a CSS selector where i can select all anchors with a class containing icon-*
<a class="icon-a icon-large scrollTo" href="#a"></a>
<a class="icon-large icon-b scrollTo" href="#b"></a>
<a class="icon-large scrollTo icon-c" href="#c"></a>
I just jumbled up the icon- since i want to check if the css selector can handle all cases.
I want to be able to change the style of all anchors that contains the class icon-*. This code doesn't seem to work.
a [class^="icon-"], a [class*=" icon-"] {
text-decoration: none;
color: #1BA1E2;
}
Is Javascript my only option?
You were using an incorrect selector - a [class] is all anchors with a class as a descendant.
Basically, any element descending from an <a>, which starts with or contains the class icon- will be targeted.
What you want is to select all anchors starting with or containing that class themselves - a[class]:
a[class^="icon-"], a[class*=" icon-"] {
text-decoration: none;
color: #1BA1E2;
}
jsFiddle example here.
Yes - but you first need to remove the space between the type selector and the attribute selector and the space in the attribute value:
a[class^="icon-"], a[class*="icon-"] {
text-decoration: none;
color: pink; /* get rid of the # */
}
http://jsfiddle.net/c8YdD/1/
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.