This is a follow-up to a previous question on Stack Overflow (see referenced link). Consider the following code (pulled from W3Schools):
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
If I include this in a page, this changes the attributes of all its links. What if I want to only modify these attributes for specific links? Links in the sidebar of my page, for instance.
I believe the solution will be tricker than the one in the referenced Stack Overflow question. I attempted to nest these in some .class selectors and making <a class="my_class" href="#">Hello World</a>, but this does not seem to work.
You can give the sidebar a class and style only the child link elements.
e.g.
<div class="sidebar">
...links
</div>
.sidebar a:link {
color: #FF0000;
}
.sidebar a:visited {
color: #00FF00;
}
...etc.
The solution in the linked example would also work if you gave a specific class to the link elements. Just be sure that you're adding the class after the element and not the pseudo-selector.
e.g. a.my_class:visited and not a:visited.my_class
Simple Styling
To achieve what you're looking for, you can apply a class to the container that will house your sidebar links (we'll use .sidebar in this example) and then target any anchors that fall within the container that the .sidebar class is applied to.
Markup:
<div class="sidebar">
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
</div>
CSS:
/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 1em;
}
/* color for the unvisited links you want to style */
.sidebar a:link {
color: #FF0000;
}
/* color for the visited links you want to style */
.sidebar a:visited {
color: #00FF00;
}
/* underline the links you want to style when hovered */
.sidebar a:hover {
text-decoration: underline;
}
/* color for the active links you want to style */
.sidebar a:active {
color: #0000FF;
}
Tip: If you use descriptive ("semantic") classnames like .sidebar, you make it easier for you (and other developers) to identify which elements are being styled.
Further Customization:
What if you wanted to apply a little extra customization to one (or more) of your sidebar links so that it stood out from the rest? Well, let's pretend you wanted one of those links to be green.
You could achieve this by applying a class to one of the anchors in our container.
Markup:
<div class="sidebar">
Lorem Ipsum in GREEN!
Lorem Ipsum
Lorem Ipsum
</div>
CSS:
/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 1em;
}
/* color for the unvisited links you want to style */
.sidebar a:link {
color: #FF0000;
}
/* color for the visited links you want to style */
.sidebar a:visited {
color: #00FF00;
}
/* underline the links you want to style when hovered */
.sidebar a:hover {
text-decoration: underline;
}
/* color for the active links you want to style */
.sidebar a:active {
color: #0000FF;
}
/* override the color of one of our sidebar links to be green! */
.sidebar a.green {
color: green;
}
I hope this helped!
EDIT: Cleaned up for simplicity.
Related
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
In my CSS file I have some general styles for links that I want to keep universal, such as no text decoration when visited, and a color change when hovered, but I want some specific styles on my navigation bar at the top like the font being white all the time (Black nav bar but white everything else so I want to see the links), but the #navBar specific styles on my links seem to make any other general styles on links cancel out, such as the color change to #1d99ff in a:hover, or the text-decoration: none in both a:link and a:visited as shown below.
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
color: #1e99ff
}
#navBar{
text-align: center;
word-spacing: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: #000000;
letter-spacing: 3px;
}
#navBar a:link{
color: #FFFFFF;
}
#navBar a:visited{
color: #FFFFFF;
}
Shouldn't the general link styles be applied to all links, and the ID specific ones take those styles and add the ones specified? Or do I have to redefine the styles already defined before?
Thanks
When you want to override a single item's style for instance, you should do it via html since it will simply override all conflicts.
<div style="color: #000;">
I have a class inside a link tag like this:
<a class="title" href="page.php" >some text and <span class="highlight" > keyword</span></a>
css:
a:visited{
color: purple;
}
.highlight{
color: yellow;
}
when i click the link it becomes purple but the keyword remains yellow, what to do?
You could do it like this:
JSFiddle - DEMO
HTML:
<a class="title" href="#">some text and <span class="highlight" > keyword</span></a>
CSS:
a:visited, a:visited > .highlight {
color: purple;
}
.highlight {
color: yellow;
}
If you want to style elements matching .highlight when they are inside a visited link differently to ones outside a visited link, then you need to write two rule-sets for it.
Use a descendant combinator.
.highlight {
/* regular */
}
a:visited .highlight {
/* inside a visited link */
}
Add this to css:
a:hover, a:hover > span{color: purple;}
I'm just starting out in CSS and am have some trouble with adding colour to links. When I add the link colour it doesn't work, so I tried to fix it myself but only messed up my website more.
This is my code.
<html>
<head>
<title> website </title>
</head>
<style type="text/css">
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
{
a:link
{
color:#00FFFF;} /* unvisited link */
a:visited
{
color:#4DFF4D;} /* visited link */
a:hover
{
color:#00FFFF;} /* mouse over link */
a:active
{
color:#00FFFF;} /* selected link */
}
h1
{
font-size:40;
}
h3
{
font-size:20;
text-decoration:underline;
}
p
{
font-size:12;
}
</style>
<body>
<h1> heading </h1>
<hr size="3" color="red" />
<h3>Welcome!!!</h3>
<p>Welcome to my website!</p>
<h3>Links</h3>
<p>Youtube</p>
</body>
</html>
Is it something in the Html code or in the Css coding?Please help.
Start by properly closing your braces and let us know how that goes
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
{
should be
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
}
There is an order to stylize anchors pseudo states.
a, a:link, a:visited {
/* any links, unvisited links, visited links*/
}
a:hover, a:visited:hover, a:active, a:focus {
/* any links hovered, any links already visited hovered, any links with active state (mouseDown or actual page), any links that has browser focus */
}
a:focus {
/* maybe you want to remove outline for this one */
}
Try this out , of course, after cleaning up your messy .css
Is it possible like lets say the text in the div header has a red hover, and the text in the div in the footer a white hover?
Or is this just not possible and can you only set 1 style for the whole document?
This is very much possible, just like any other element you can style them separately by being more specific.
If you have this HTML:
<div id="top">
First link
</div>
<div id="bot">
Second link
</div>
With this CSS you would style both links:
a:hover {
color: #000;
}
With this CSS you can style them separately:
#top a:hover {
color: #f00;
}
#bot a:hover {
color: #fff;
}
You can set as pretty much as many as you want to if you just hook it right:
/* every a:hover has color red */
a:hover { color: red; }
/* #footer a:hover has color green. */
#footer a:hover { color: green; }
/* Every link that has class ".ThisClass" will have yellow color */
a.ThisClass:hover { color: yellow; }
Yes this is possible.
#header a:hover {
color: #f00;
}
#footer a:hover {
color: #0f0;
}
http://jsfiddle.net/wrygB/2/
You may want to split this though so you can use the same hovers elsewhere. In which case you would do:
.main:hover {
color: #f00;
}
.sub:hover {
color: #0f0;
}
And then you can apply a class of main or sub to any element to get the hover effect.
Well you'd just select the element the a:link is within, and apply styles like that.
i.e
#header a:hover { color: red; }
#footer a:hover { color: white; }