Sorry for my poor english, I'm french !
The first li is already in red, but I want classical rollover effect (only css)
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
with
li:first-child { color: red; }
li:hover { color: red; }
ul:hover li:first-child { color: black; }
li:first-child:hover { color: red; }
The last line doesn't work : When my mouse is over 1111, he becomes black instead of stay red.
Look here please : http://jsfiddle.net/cP5rQ/3/
And thank you for advance.
You need to increase the specificity of your last rule enough so that it becomes at least equal to the specificity of the third rule; it will then override the third rule and the item will become red as it should.
Do this by writing the last rule as
ul:hover li:first-child:hover { color: red; }
See it in action.
This does the trick. Is this what you wanted?
li:first-child { color: red; }
ul:hover li:first-child { color: black; }
li:hover { color: red; }
ul:hover li:first-child:hover { color: red; }
http://jsfiddle.net/cP5rQ/6/
Related
I want my link only to change color after I click on it. I have added the appropriate a:link and a:visited pseudo-classes in the correct order. However, my link changes color when I refresh the page too and I don't want this.
I created a simple example for you
If you've never visited the link before, it will be black (default color)
If you've visited the link before, it will be blue
If you hover the link, it will be red
https://jsfiddle.net/ykrfqucw/1/
HTML:
emrerothzerg.com
CSS:
a{
color: black;
}
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
SASS (if you like to have):
a {
color: black;
&:visited {
color: blue;
}
&:hover {
color: red;
}
&:active {
color: yellow;
}
}
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
#style:visited {
background-color:yellow;
}
#style:active {
background-color:yellow;
}
Several ways to do it below. Hope it helps
Can you add an active state on the same line as a hover state in [less] or does it have to be nested on line separate lines?
example:
standard less
nav {
color:#black;
display:block;
&:hover {color:#primary-color;}
&:active {color:#primary-color;}
}
somehow to do this
nav {
color:#black;
display:block;
&:hover, &:active {color:#primary-color;}
}
I've tried: [&:hover, &:active;] I've tried: [&:hover; &:active;] but it's doesn't seem to work.
Actually yes you can, and the second variant you provided is correct as long as you define the #primary-color variable:
#primary-color: #f00;
#black: #000;
nav {
color: #black;
display:block;
&:hover, &:active {color:#primary-color;}
}
will produce:
nav {
color: #000000;
display: block;
}
nav:hover,
nav:active {
color: #ff0000;
}
It's late and my stupidity tells me to go to bed.
Juicy Scripter get's the win, I get the lose for back coding mistakes.
But yes,
nav {
color: #black;
display:block;
&:hover, &:active {color:#primary-color;}
}
Is the answer.
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;
}
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.
I have the following HTML:
Bioshock 2<span> - Xbox 360 review</span>
I'd like to style the first part of the link in one way and the span in another, like this:
I've managed to do this, using the following CSS:
a {
text-decoration: none;
}
a span {
color: #c8c8c8;
}
a:link,
a:visited {
color: #787878;
}
a:hover,
a:active {
color: #fff;
background-color: #a10000;
}
However, it doesn't work as expected when I hover over it:
I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:
Any ideas how I could do this?
Try:
a:hover, a:active, a:hover span {
// ...
}
instead of:
a:hover, a:active {
// ...
}
Add this css code to it:
a span:hover {
color: #fff;
background-color: #a10000;
}
And here is the demonstration. :)