In my css it seems i can't use several different link styles in multiple id selectors.
This is how my css looks now:
#embed a:link, a:visited, a:hover, a:active
{
color: #000000;
text-decoration: underline;
}
#header a:link, a:visited, a:active
{
color: #777777;
text-decoration: none;
}
It only follows "#header a:link, a:visited, a:active".
Both #embed and #header refers to two different divs in the html, both are separate from each other.
CSS descendant selectors do not distribute over ,s.
You need to repeat #header after each ,, or the later selectors will apply to all as.
the css code shouldn't it be like this ?
#embed a:link, #embed a:visited, #embed a:hover, #embed a:active
Ju
Related
I'm using Bootstrap3 for a small website, and I need to change the link color in one of my divs.
However, for some reason, the bootstrap link colors are always being applied instead of my custom ones.
CSS:
.social a,
.social a:hover,
.social a:focus {
color: #fefefe;
}
HTML:
<div class="social">
<i class="fa fa-linkedin"></i>
</div>
I also tried this:
.social > a,
.social > a:hover,
.social > a:focus {
color: #fefefe;
}
But doesn't make a difference.
#fefefe is a white color. Maybe you have white content on a white background.
It should work.
body {
background-color: darkgrey;
}
.social a,
.social a:hover,
.social a:focus {
color: #fefefe; // white
}
Example
Try adding .social a:link to the list
either add !important to your style:
color: #fefefe!important;
or better, make sure your styles are loaded AFTER bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyle.css">
EDIT:
if <a> tags is what want to style you might want to apply your color to :link and :visited too:
.social a,
.social a:link,
.social a:visited,
.social a:hover,
.social a:focus {
color: #fefefe;
}
From the chrome debugger:
element.style {
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
(Everything below this is struck through)
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
I'm trying to figure out why an element (title) is not showing up properly. This is what it looks like in the html body:
<div id="title">
link
</div>
I understand that when it's struck through, that style isn't being applied. What I don't understand is
a) Why is the nav style being called at all?
b) Why does the title style for links get called several times? The first time it seems to work, but the second time it's being struck through? (On the website, the element currently is only showing up in black text.)
Thanks in advance!
Your style is being called because the nav parent only applies to the first part of the selector. Basically you have this:
nav a:link,
a:visited,
a:hover,
a:active{
//style
}
What you really want is:
nav a:link,
nav a:visited,
nav a:hover,
nav a:active{
//Style
}
The same thing goes for the #title a:link, a:visited, a:hover, a:active
My guess on why it is trying to use the same CSS multiple times would be that you have the same CSS in multiple places. E.G. you are either
Importing the CSS twice
Importing two CSS files with a duplicate style
Duplicating the CSS in your one CSS file
Check the associated line numbers and see if they are the same (meaning it is actually using the exact same CSS twice) or different (meaning you have the same CSS in multiple places).
you have:
#title a:link, a:visited, a:hover, a:active {
color: #FF33CC;
text-decoration: none;
}
but what it seems like you need is:
#title a:link, #title a:visited, #title a:hover, #title a:active {
color: #FF33CC;
text-decoration: none;
}
the id tag has to appear after each comma, otherwise you are styling ALL links, not just the ones with the #title id.
Hope that helps!
I'm working on a project that has these requirements:
When hovering over a section with anchors, the colors of all anchors in that section (non hover/active state) change.
The active/hover state color of these anchors should inherit the normal anchor active/hover color.
I was able to achieve the first requirement, but the active/hover states don't change at all when hovering over the specific link. It's obviously an issue with specificity, but I can't seem to figure out why.
Here is a boiled down version of the code: http://codepen.io/dbough/pen/maxrv
a:link, a:visited {
color:green;
}
a:hover, a:active, header .color a:hover, header .color a:active {
color:pink;
}
.color a:link, .color a:visited{
color:red;
}
$("header").hover(function() {
$("header").addClass("color");
},
function() {
$("header").removeClass("color");
}
)
In the simplest terms.
Define a color for all links
Set a hover color hased on the ul being hovered
Set a different colow when the a is hovered
a:link {
color:green;
}
ul:hover a {
color:pink;
}
ul a:hover {
color:red;
}
Codepen Example
Does that not meet the criteria(?)...and no JS required
This has nothing to do with specificity, your selector just doesn't match.
header .color a:active {
You are using JavaScript to add a class to the <header> element, but you are writing a selector where the element with the class is a descendant of the <header>.
Remove that descendant combinator from the selectors:
header.color a:active {
delete your style and jquery hover function and try use this (only css):
html,body {
margin:0;
padding:0;
}
header {
width:50%;
padding:auto;
margin:auto;
}
li {
display:inline;
padding:50px;
}
a, a:link, a:visited{
color:green;
}
a:hover, a:active{
color:pink !important;
}
header:hover a{color:red;}
I'm using the following html code:
<div id="topMenu" class="spanningMenu">
<table>
<tr>
<td width="6.25%"></td>
<td width="12.5%">Home</td>
<td width="12.5%">|</td>
<td width="12.5%">Contact Us</td>
<td width="12.5%">|</td>
<td width="12.5%">Directions</td>
<td width="12.5%">|</td>
<td width="12.5%">Disclaimer</td>
<td width="6.25%"></td>
</tr>
</table>
</div>
and my css looks like this:
.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
color: #000;
}
Which doesn't work. The section above is still inheriting it's font color from the parent container. I understand that
I've tried a few different variations of spanningMenu a:link, and nothing seems to be working. Google's not helping like it normally does.
Thanks!
Try this:
.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
color: #000 !important;
}
If that works, you have another rule that CSS thinks is more important. Like maybe td a { color: something }? You can read in the spec about the complicated rule precedence order.
Try adding !important to the end of the style, so it looks like this:
.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
color: #000 !important;
}
I guess, its pretty simple.
.spanningMenu a, .spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
color: #000;
}
This is the css for setting the color for h1 text that is linked:
.nav-left h1 a,
a:visited {
color: #055830;
}
<div class="nav-left">
<h1>Housing</h1>
</div>
It does not look like it is working appropriately, any help is appreciated.
What about:
.nav-left h1 a:visited{
color:#055830;
}
if you want the colour to be the same for unvisited links you'll need to add a specific selector for that as well
.nav-left h1 a:link, .nav-left h1 a:visited {
color:#055830;
}
If you want them the same, you must be specific:
.nav-left h1 a, a:visited
is not the same as:
.nav-left h1 a, .nav-left h1 a:visited
.nav-left h1 a {
color: #055830;
}
You don't need to add a:visited if it is the same color.