I have two divs in a web page (say view_1 and view_2). I want the styles of the links in each div to be different. Let's say the styles of the links are as follows:
style of links in div view_1:
a:link {
color: #CB4C2F;
text-decoration: none;
}
a:visited {
color: #CB4C2F;
}
a:active,
a:hover {
color: #B60A00;
}
style of links in div view_2:
a:link {
color: #B5B5B5;
text-decoration: none;
}
a:visited {
color: #808080;
}
a:active,
a:hover {
color: #FFFFFF;
}
In the page, I want to specify only the div in use. I do not want to specify a style for the links; the links should adopt the styles from the div in which they exist. How may this be accomplished?
Add classes to your div's
View_1
.view_1 a:link {
color: #CB4C2F;
text-decoration: none;
}
.view_1 a:visited {
color: #CB4C2F;
}
.view_1 a:active,
.view_1 a:hover {
color: #B60A00;
}
View_2
.view_2 a:link {
color: #B5B5B5;
text-decoration: none;
}
.view_2 a:visited {
color: #808080;
}
.view_2 a:active,
.view_2 a:hover {
color: #FFFFFF;
}
Related
I'm working on a project for school, and I wanted the three links I have to be set to the different colors I need. But when I call a class in my CSS file, I'm told:
Unknown property 'a'. Expected RBRACE at line 12, col 11.
How can I set different classes so that my different links are different colors? Below is my CSS code.
body {
background-color: white;
color: black;
src: url('PressStart2P-Regular.ttf') format('truetype');
font-family: Times;
}
.colorlink {
/* unvisited link */
a:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: powderblue;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
}
you are using a inside .colorlink selector , so it saw it as a property not a selector , thus its Unknown , you cannot nest selectors in css
what you can do instead is use multiple selectors like this :
a.colorlink:link {
color: darkred;
text-decoration: underline;
}
/* visited link */
a.colorlink:visited {
color: green;
}
/* mouse over link */
a.colorlink:hover {
color: hotpink;
}
/* selected link */
a.colorlink:active {
color: powderblue;
}
a.colorlink:link {
text-decoration: none;
}
a.colorlink:visited {
text-decoration: none;
}
a.colorlink:hover {
text-decoration: underline;
}
a.colorlink:active {
text-decoration: underline;
}
to only remove a style
a {
color : inherit ;
text-decoration : none ;
}
The error appears because it is not possible to use nested styles in pure CSS. Thus CSS thinks you are trying to a CSS-Property to .colorlink. Use a preprocessor like SCSS for that.
Besides, I assume you are trying to achieve something similar like this:
body {
background-color: white;
color: black;
font-family: Times;
}
.link1 {
color: green;
}
.link2 {
color: red;
}
.link3 {
color: blue;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: hotpink;
}
a:active {
color: powderblue;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
My Link
My Link
My Link
So I have this bit of CSS to change a specific link on a page to a different color (the default link color is the same background color of where the text is sitting, making it invisible).
.scroll a:link {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:hover {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:visisted {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:active {
text-decoration: underline;
color: #5a4a31;
}
Which works in every browser but Chrome ('hover' is the only part that actually works when viewing in Chrome, the rest just go to the default link styles I have set). Anyone know why? Thanks!!
If you're going style each state of the link, the order you should do this is LVHA (link, visited, hover, active). Also, you misspelled 'visited'.
.scroll a:link {
text-decoration: underline;
color: red;
}
.scroll a:visited {
text-decoration: underline;
color: green;
}
.scroll a:hover {
text-decoration: underline;
color: blue;
}
.scroll a:active {
text-decoration: underline;
color: orange;
}
You could refactor a little:
.scroll a {
text-decoration: underline;
}
.scroll a:link { /* color: blah; */ }
.scroll a:visited { /* color: blah; */ }
.scroll a:hover { /* color: blah; */ }
.scroll a:active { /* color: blah; */ }
http://codepen.io/antibland/pen/WwKzdN
You spelled visisted instead of visited.
if .scroll is the class of the link than their is no need to put
a:link... you can just put .scroll:link or .scroll:hover.
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
<div id="macrosectiontext">bla bla bla</div>
however it seems that it doesn't work. The div still inherits the global link style.
CSS work on inheritance, so you should only override the properties you want to change.
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for you to show your code is working (changed the hover color, just for demo)
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
My CSS has , in the following order:
B, STRONG
{
color: #333;
}
A
{
color: #00ae9d !important;
border-bottom: dotted 1px #00ae9d;
text-decoration:none;
}
But when I hold a link, it comes up gray with green dots. What do I need to do so that bolded items come up dark gray, and linked bolded items come up green with dots? Is there a way to rank each rule?
The behavior will depend on the order that you're setting your tags
<b>One</b>
is not the same as
<b>One</b>
Check this jsfiddle
to give color to a <a> you need to do follow LoVe HAte rule:
L(link)o*V*(visited)e H(hover)A(active)te
a:link {
color: #00ae9d;
}
a:visited {
color: #999;
}
a:hover {
color: #900;
}
a:active {
color: #555;
}
a:focus {
color: #900;
}
off course you can group them, but you have to keep the same order.
a:link, a:visited {
color: #00ae9d;
}
a:hover, a:active, a:focus {
color: #900;
}