So while having an a tag with the class btn I can style it by using .btn in my CSS. However some say it's a better practice to style your button with .btn:link instead of just .btn. Using :hover makes a clear difference on the output. But I was wondering what exactly the difference is between styling with or without :link
.btn:link {
background-color: #67c5fc;
border-radius: 100px;
padding: 10px;
text-decoration: none;
color: #000;
}
.btn:hover {
background-color: #0082ce;
cursor: pointer;
}
.btn2 {
background-color: #48c964;
border-radius: 100px;
padding: 10px;
text-decoration: none;
color: #000;
}
.btn2:hover {
background-color: #2eaa49;
cursor: pointer;
}
Button-with-:link
Button-without-:link
Here is explain:
The :link CSS pseudo-class represents an element that has not yet been
visited. It matches every unvisited <a>, <area>, or <link> element
that has an href attribute.
By default, most browsers apply a special color value to visited links.
When you use :link you can declare new style instead the default definition
Learn more here:https://developer.mozilla.org/en-US/docs/Web/CSS/:link
The :link selector is used to select unvisited links.
It is the opposite of the :visited selector.
Related
Is there a set of styles that you can set to remove all anchor styles?
The most I can do is remove the text decoration but I don't want to define a color because each text field could be a different color:
#text {
color: green;
}
a {
text-decoration: none;
color: none;
}
<a href="" id="text">
Text
</a>
UPDATE:
There was a typo in my code. So the link was not connected to the style rule.
a { color: inherit; }
… will cause the element to take on the colour of its parent (which is what I think you are looking for).
explanation of inherit property
a {
text-decoration: none;
color: unset;
}
/* Global values */
color: inherit;
color: initial;
color: unset;
https://developer.mozilla.org/fr/docs/Web/CSS/color
use unset instead of none
I am styling the .button1 class with its own ruleset. Additionally, I have a separate ruleset for the :hover pseudo-class using the CSS selector .button1:hover
But I wish to define the :hover pseudo-class styling within the existing .button1 ruleset.
Currently:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
Desired:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
hover:background-color: #4CAF50;
}
Is it possible to do anything like this?
Here is link https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
CSS
This is impossible to do with pure CSS. :(
.button1 and .button1:hover are different CSS selectors.
With CSS, if you want to apply unique styling to the hover-state, then it must have a separate ruleset:
.button1 { background: red; }
.button1:hover { background: pink; }
CSS preprocessors
However, there are a handful of CSS preprocessors that allow us to write style-rules using special syntaxes that allow nesting similar to what you wish to accomplish.
For instance, here is "SCSS" syntax that the Sass preprocessor uses:
.button1 {
background: red;
&:hover {
background: pink;
}
}
On their own, these intermediate syntaxes will not run in the browser, so in the end, a special interpreter (preprocessor) must be used to "process" and translate the special syntax into real CSS that the browser can actually load.
Some popular preprocessors:
Sass
Less
Stylus
PostCSS
If you want to add hover to any class the format is
You can not add it inside .button class
.button1:hover{
background-color: #4CAF50;
}
Here is an example to get hovering effect -
<style>
.btn{
/* Style your button */
}
.btn:hover{
/* Add hovering effect to your button */
}
</style>
<button class="btn">Green</button>
I have the following html code:
<a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>
with the following css:
a.deletelink:hover,
a.deletelink:active {
background-color: #F00;
color:#FF0;
}
a.deletelink:visited,
a.deletelink:link {
line-height:5em;
width: 5em;
text-align: center;
margin:2em;
display: block;
font-weight: bold;
color:#F00;
background-color:#639;
padding: 0.5em;
text-decoration: none;
}
but the color of the link will not change when mouse moves over it. Could you guess what is wrong here?
thanks
Note that :hover must come after :link and :visited pseudo classes, otherwise it won't affect the element.
a.deletelink:visited ,a.deletelink:link{ /* ... */ }
a.deletelink:hover, a.deletelink:active { /* ... */ }
From MDN page:
This style may be overridden by any other link-related pseudo-classes,
that is :link, :visited, and :active, appearing in subsequent rules.
In order to style appropriately links, you need to put the :hover
rule after the :link and :visited rules but before the :active one, as
defined by the LVHA-order: :link — :visited — :hover — :active.
Just change the order of hover behaviour:
a.deletelink:visited ,a.deletelink:link{line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
a.deletelink:hover, a.deletelink:active{ background-color: #F00; color:#FF0;}
working demo here
:hover must be used after :link , :visited
You should follow the LoVeHAte formula where L denotes Link, V denotes Visited, H denotes Hover and A denotes Active.
You have to use hover after :link and :visited properties :
a.deletelink:visited,
a.deletelink:link {
line-height:5em;
width: 5em;
text-align: center;
margin:2em;
display: block;
font-weight: bold;
color:#F00;
background-color:#639;
padding: 0.5em;
text-decoration: none;
}
a.deletelink:hover,
a.deletelink:active{
background-color: #F00;
color:#FF0;
}
a.deletelink:active{ background-color: #F00; color:#FF0;}
a.deletelink:hover { background-color: #F00;color: #FF0;}
a.deletelink:visited {line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
.deletelink {line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}
that should do it for you
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.
Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).
Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.
I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:
a.nostyle:link {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
a.nostyle:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.
I achieved this by creating a class .reset-a and targeting all of its' pseudo classes.
Targeting of all pseudo classes is important to make it flawless.
outline: 0 property removes the dotted border that surrounds a link when it is focused or active.
.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active {
text-decoration: none;
color: inherit;
outline: 0;
cursor: auto;
}
If you don't care about IE, you can attach :not(#exclude) (where exclude is the ID of the link in question) to your link styles:
a:link:not(#exclude), a:visited:not(#exclude) {
text-decoration: none;
color: blue;
cursor: pointer;
}
Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:
body {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
You can simply toss in a more specific selector, that'd match that link, onto the body rule:
body, #exclude {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
Here is a handy snippet if you want to copy-paste the accepted solution into React
const UnstyledLink = ({ href, children }) => (
<a
href={href}
style={{
textDecoration: "inherit",
color: "inherit",
cursor: "auto",
}}
>
{children}
</a>
);