I need to get rid of an underline in a hyperlink.
<div id='something'>
<h2>
<a href='http://somerandomurl'>Photo</a>
</h2>
</div>
I'm using this CSS, but it won't work.
#something h2 a{text-decoration:none}
Here is the css you want:
#something a:link {text-decoration:none;}
#something a:visited {text-decoration:none;}
#something a:hover {text-decoration:underline;}
#something a:active {text-decoration:underline;}
The specific CSS you want to target depends on what exactly you are looking for. For example, if you want all links in 'something' to not be underlined, do what I wrote above. But if you wanted all links to not be underlined, you would not put the #something, etc. Read about context selectors if your not sure what I mean. Here is good link.
http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax
Hope that helps
what is #ugc?
you need...
#something h2 a { text-decoration: none; }
you can also define
a:hover, a:link, a:visited
...if needed for different states
The style you have should work, except the id in your selector is wrong..it should be
#something h2 a{text-decoration:none}
http://jsfiddle.net/V4e8m/2/
a:link, a:visited { text-decoration: none; }
Related
I'm trying to change the font color of a link inside a header class. I tried using the code below, but it affected all the links on the page. I've tried different arrangements and can't seem to figure out the correct way.
CSS Code
#amp-wp-header a:active, a:visited {
color:#ffffff;
}
a:hover, a:focus {
color:#ffffff;
}
HTML Code
<header id="#top" class="amp-wp-header">
<div>
Title
</div>
</header>
If you don't care about specific link states, simply do:
.amp-wp-header a {
color:#ffffff;
}
The issue with your approach is that the comma separator is used to indicate separate selectors.
When you do:
.amp-wp-header a:active, a:visited {
color:#ffffff;
}
You're saying:
Assign this color to all a:active elements under .amp-wp-header
Assign this color to all a:visited elements (This one tags the whole document)
Try this:
header.amp-wp-header a:active,
header.amp-wp-header a:visited,
header.amp-wp-header a:hover,
header.amp-wp-header a:focus {
color:#ffffff
}
Try this code,
<header id="#top" class="amp-wp-header">
<div class="spl-for-link">
<a href="http://example.com">
Title </a>
</div>
</header>
.spl-for-link a
{
color:#ffffff;
}
.spl-for-link a:hover,a:focus
{
color:#ffffff;
}
#amp-wp-header a:active, #amp-wp-header a:visited{color:#ffffff;}
#amp-wp-header a:hover,#amp-wp-header a:focus{color:#ffffff;}
First off you are using # which is for ID not for class.
use something like this:
.amp-wp-header > div a{
color: #fff;
}
but it affected all the links on the page.
#amp-wp-header a:active,a:visited{color:#ffffff;}a:hover,a:focus{color:#ffffff;}
If you reformat this (and change the # to a . to designate a class), you get
.amp-wp-header a:active,a:visited{color:#ffffff;}
a:hover,a:focus{color:#ffffff;}
and you can see clearly that in the second rule you are applying the color to all hovered or focused links.
In other words, the first {color:#ffffff} terminates the rule. The following part starting with a:hover is interpreted as an entirely new, separate rule. It is not affected by the .amp-wp-header just because it happens to be on the same line.
So you might think the solution would be to rewrite your CSS as one rule, so that the higher-level selector applies to all the pseudo-class states:
.amp-wp-header a:active, a:visited, a:hover, a:focus {color: #ffffff;}
However, this does not work either, because the .amp-wp-header applies only to a:active. Each member of a "selector group", sometimes called "selector list", the list of selectors separated by commas, is completely independent. In other words, the above is exactly equivalent to
.amp-wp-header a:active {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:focus {color: #ffffff;}
which will apply the style to all visited, hovered, or focused links, not just those inside .amp-wp-header. Therefore you need to write it as
.amp-wp-header a:active {color:#ffffff;}
.amp-wp-header a:visited {color:#ffffff;}
.amp-wp-header a:hover {color:#ffffff;}
.amp-wp-header a:focus {color:#ffffff;}
For which the equivalent is
.amp-wp-header a:active,
.amp-wp-header a:visited,
.amp-wp-header a:hover,
.amp-wp-header a:focus {
color: #ffffff;
}
Note that in future browsers you will be able to use :matches as follows:
.amp-wp-header a:matches(:active, :visited, :hover, :focus) {
color: #ffffff;
}
For more details, see the MDN page. For compatibility, see this chart. At the moment you will need to use vendor-prefixed versions such as -webkit-any or -moz-any, which makes it less attractive.
Besides understanding how selectors and selector groups work, one lesson here is to format and indent your CSS carefully to help you (and others) see what it means.
I have a pretty noob problem, so I hope someone could help me out.
I have a Blogger blog, and I can't get the links to function like I want to.
I want the links in the post content and in the sidebar - the ones that are a purple shade (#8B7083) and underlined - to look the same for both a:link and a:visited. For some reason visited links turn black, even though I don't have that anywhere in my CSS.
Help me, please?
You do have it in your CSS:
.popular-posts .item-title a:link, a:hover, a:active, a:visited {
color: black !important;
text-decoration: none !important;
}
Try not to use the !important keyword, it overrides all other styles. Use specificity to determine what styles to apply where: http://css-tricks.com/specifics-on-css-specificity/
Looking at your selectors, I believe you might not be constructing them as you intend. Are you looking for this?
.popular-posts .item-title a:link, .popular-posts .item-title a:hover, .popular-posts .item-title a:active, .popular-posts .item-title a:visited
As it stands, your last three segments in your selector (a:hover, a:active, and a:visited) are selecting all links on those pages with those states as you are not constraining them via a descendent selector.
It seems the following variants produce identical results:
/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
Most guidance on the web uses 2 or 3. Why not go for the simplest variant which is 1? I cannot find a good reason to ever apply :link if all you need is one style for normal links and one for hover.
Is it best-practice to not use :link? Why or why not?
I don't care whether the link is visited or not. Both receive the same style. I only care about hover or not hover. This question is not about what the variants do - all do the same thing. It is about what the best variant is. Is one of the variants faulty? Which one is best-practice?
Because not every a is a link.
<a name="table_of_contents">Table of Contents</a>
isn't a link, it's an anchor that can be linked to with <a href="#table_of_contents">.
a will match it, a:link won't.
It is used to differentiate between simple anchors and anchors with href attributes. See demo jsfiddle here.
<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
With href
EDIT:
For this reason, it is important to cover all cases in your CSS. Option 2 is the only option that completely covers all cases. If you do not have anchor elements without href attributes, you are safe with option 1.
a:link is specifically for links that have not been visited. a applies to all <a> elements.as you said
I don't care whether the link is visited or not
then you may avoid the use of a:link ...use of only a...a:hover...a:active will satisfy your need
and also a:link wont work if there is no href in your anchor but a will do
I suppose you can use
<a>
to create a button so that could produce alternate results...
I always use a:link
It solely depends on your intention, so for your example, I would simply style all anchor elements one color and only change the style when the element is hovered.
a {color: #000;}
a:hover {color: #f00;}
In your case, you are only changing the color of the link when it's hovered. You need to add the hover pseudo element after the base rule otherwise it would be overridden due to the cascading of the style sheet.
If you were to use all of the psuedo elements in this case and you wanted the only difference to be the hover it would look like this:
a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}
The pseudo-class names are self explanatory:
:link - any unvisited link
:visited - any visited link
:active - when the link is active, e.g. when it's clicked or activated with a keyboard event
:focus - when the link gains focus, e.g. when a user tabs through the elements and it is the selected element
:hover - when it's hovered or moused over
The benefit of using a pseudo-class is that it will have a higher specificity than just targeting the anchor element. However, in your case it may not be needed.
I want to apply a different hyper link style to the following two things:
Any links within <p> tags in my #currentpage_content div id.
Any links with <h3> tags with a .profile class.
It sounds pretty simple but i can't see to get it right..
I've tried things like:
#currentpage_content a:hover{...}
and
#currentpage_content p a:hover{...}
but for some reason that applied to my navigation bar links even though they're outside #currentpage_content's div!
I also eventually figured out you could do something like this ( i think)..
#currentpage_content a.p:hover{...}
but now the link style aren't being applied at all when they should be.
Could someone please look at the bullet points above and tell me the exact syntax/order of words i need to achieve those two bullet points?
To make response easier here's the style i'm trying to apply:
a:link, a:visited, a:hover, a:active
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid #d4ffaa;
}
a:hover, a:active
{background-color: #d4ffaa;}
#currentpage_content p a:hover, #currentpage_content h3 a:hover {
//put your CSS in here
}
Here is a fiddle with solution for your trouble.
my links turn purple sometimes, probably becouse they are visited or something. I want to disable this from css.
How can i do this?
thanks in advance, yours lovely alexander
by using the visited pseudo-class
Simply set a CSS style which sets the colour for <a> tags.
a {color:blue;}
There are separate pseudo tags for a:link, a:hover, a:visited and a:focus, but unless they're being set elsewhere, you shouldn't need to specify them - if you just specify the style for a as above, it should apply whatever the state of the element.
If the psedo styles are being set and you need to override them, then you'll need something like this:
a, a:link, a:visited, a:focus, a:hover {color:blue;}
(of course you can remove any of the above that you don't want to override)
You can use the selector a:visited.
a:visited {
color : black;
}
In CSS write:
a:visited
{
color: #f00; /*where #f00 is your hexadecimal colorcode, you can use "blue" or an RGBa value too!*/
}
You need to define the visited property for your links.
<style type="text/css">
a:visited {color: #000000}
</style>