I have a link which should display white for 'regular' and hover, and light blue for active.
But it shows purple for 'regular'. Why?
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
text
HTML:
text
CSS:
<style>
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
</style>
If .button is an <A> tag as your CSS suggests you might want to provide styling for the "visited" pseudo class.
See: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited
Additional Information
The cascading nature of CSS means that the style's order does matter.
Once a URL has been visited, the ":visited" styles will apply.
When you hover over the link, those styles will apply as well.
The priority in which they apply will depend on the order they are in your style sheet.
Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.
Related
I override the default section styles to the code below. But the the black isn't showing up in full opacity but as a darkish grey.
::-moz-selection {
color: #fff;
background-color: #000;
}
::selection {
color: #fff;
background-color: #000;
}
<a>Hello World!</a>
With some playing around finally got it to full opacity.
::-moz-selection {
color: rgba(255,255,255,0.99);
background-color: rgba(0,0,0,0.99);
}
::selection {
color: rgba(255,255,255,0.99);
background-color: rgba(0,0,0,0.99);
}
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
1. Summary
I have list of selectors, to which properties should always apply.
For some selectors must be additionally added another properties.
I can't find, how I can do it without duplicates.
2. MCVE
2.1. Expected CSS
.KiraFirst,
.KiraSecond,
.KiraThird {
color: red;
}
.KiraSecond {
background-color: yellow;
}
In example, I use class .KiraSecond 2 times. Can I get expected behavior without this duplicate?
2.2. Stylus
Live demo on stylus-lang.com
.KiraFirst
.KiraSecond
.KiraThird
color red
.KiraSecond
background-color yellow
This is compiled to expected CSS, but I still use .KiraSecond 2 times.
I don't understand, how I can not use duplicate. For example, syntax as this not compile to expected CSS:
.KiraFirst
.KiraSecond
background-color yellow
.KiraThird
color red
Result:
.KiraFirst,
.KiraSecond {
background-color: #ff0;
}
.KiraThird {
color: #f00;
}
3. Not helped
Stylus official documentation include Selectors section
Stack Overflow Stylus questions
Stylus GitHub issues
Maybe you can use basic class for all elements? For example - .Kira and if you need to specify something for other elements you can add extra class .KiraSecond or use .Kira:nth-child(2)
in your example it can be something like this
.Kira {
color: red;
}
.KiraSecond {
background-color: yellow;
}
or
.Kira {
color: red;
}
.Kira:nth-child(2) {
background-color: yellow;
}
You (can't)? and you shouldn't.
Duplicating that selector in that case is not a bad practice.
you are not duplicating the same property/value for many classes
you can clearly override specific property
you can clearly modify/change behaviour for specific class
e.g:
.class1, .class2, .class3 {
color: red;
background: yellow;
border: 1px solid;
}
.class1:hover {
color: blue;
}
.class2 {
border: 2px dotted;
}
.class3 {
color: pink;
}
What would be a bad practice in that case (with no selector duplication)
.class1 {
color: blue;
background: yellow;
border: 1px solid;
}
.class2 {
color: red;
background: yellow;
border: 2px dotted;
}
.class3 {
color: pink;
background: yellow;
border: 1px solid;
}
I was able to successfully change the background-color (red) of a button and the color of its text (yellow), but for some reason it reverts to having a blue background and a white colored text.
This is my CSS code:
.btn-primary {
background-color: red;
color: #ffff00;
}
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:link {
background-color: red;
color: #ffff00;
}
.btn-primary:hover {
background-color: yellow;
color: #ffff00;
}
try adding !important at the end of your declarations, like this:
background-color: yellow
becomes
background-color: yellow !important
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.