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.
Related
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 the first letter selector working, to change the color of the first letter but when hovering that area the color matches with the background so it becomes invisible. This is the part of code working
.nav-menu li a:first-letter {color:#b5b503;}
.nav-menu li a:first-letter {font-weight:bold;}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
And this is the part where i guess i should add a .first-letter selector but cant find out how as it is already a hover selector in it
.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #b5b503;
color: #273664;
}
Yes, you can
Example CSS :
p:first-letter {
font-size: 120%;
}
p:hover:first-letter {
color: white;
}
HTML :
<p>Hello world</p>
Demo here : http://jsfiddle.net/LRFw8/1/
For your code, you would style this in .nav-menu li a:hover:first-letter
I'm trying to style my links within a div which I've given the class .whatnextnav. The hover styling is working but not the link, it's still inheriting the color: #3CB6CE even thought Firebug says it's not.
Can anyone see a problem with the below?
.whatnextnav a:link, a:active, a:visited
{
color: #008566;
text-decoration: none;
}
.whatnextnav a:hover
{
color: #008566;
text-decoration: underline;
}
When multiple selectors share a single style, the full selector must be used for each selector. Make the class prefix each selector:
.whatnextnav a:link, .whatnextnav a:active, .whatnextnav a:visited
{
color: #008566;
text-decoration: none;
}
JS Fiddle: http://jsfiddle.net/9Kqv8/
Try changing it to:
.whatnextnav a, .whatnextnav a:active, .whatnextnav a:visited
{
color: #008566;
text-decoration: none;
}
.whatnextnav a:hover
{
color: #008566;
text-decoration: underline;
}
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;
}
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example
something like this or close to this would be preferable
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
I feel like there's an easier way than this.
Heres how to do it to all links
I believe it should work:
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
One can follow below method:
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
Click Here
Not directly in css, but there are some projects that extend css
Check out sass:
http://sass-lang.com
I also believe current CSS syntax is not all that optimal. My personal choice is to go with something like LESS where you get much more intuitive and compact syntax to style your work.
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.