Why are both of my link green when they are visited? - html

I define a css file my_style.css and use it in my page.
body {
background-color: linen;
}
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
<html>
<head>
<link href="my_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="myClass1" href="http://www.youtube.com">Link1</a>
<a class="myClass2" href="http://www.youtube.com">Link2</a>
</body>
</html>
Why are both links green?

Both links are green because:
.myClass2 a:link,a:visited { /* foo */ }
reads as:
.myClass2 a:link { /* foo */ }
a:visited { /* foo */ }
and not as:
.myClass2 a:link { /* foo */ }
.myClass2 a:visited { /* foo */ }
You need to put the full selector in each part of the group.
.myClass2 a:link,
.myClass2 a:visited { /* foo */ }
Additionally, since the links themselves are members of the class, you don't want the descendant combinator in there.
a.myClass2:link,
a.myClass2:visited { /* foo */ }

You forgot the class selectors before the a:visited selectors
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}

You are applying stiles to a:visited, two times. The first time you're setting color: orange, the second one color: green.
Obviously both links are already visited since both are the same.
CSS stands for "cascading style sheets", that essentially means that the last properties override the first ones.
Your confusion might be in regards of how the , (comma) works. It means that the styles are to be applied to both selectors (what's before and what's after the comma).
Also, on your CSS the classes are applied to a parent of the a tag instead to the a tag itself. Here's an approach to a solution (since I don't know what you're trying to achieve:
/* this will apply to all <a> tags with class myClass1 */
a.myClass1 {
color: orange;
}
/* this will apply to all <a> tags with class myClass2 AND to all visited a tags even if they are of class myClass1 */
a.myClass2,
a:visited {
color: green;
}
/* This is so you don't write the same twice (DRY principle) */
a.myClass1,
a.myClass2 {
margin-left: 40px;
}
Essentially on your posted HTML, both links will be green. If you change one of them to a page you haven't visited, it will be orange.

your current css of:
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
reads as the following:
for myClass1's descendant a anchor tag that hasn't been visited (link), and for a anchor tag that has been visited make text color orange and make its left margin 40px.
then for myClass2's descendant a anchor tag that hasn't been visited, and for a anchor tag that has been visited, make the text color green and make its left margin 40px;
as the others have said before, the , a:visited css is changing all the anchor tags to green because css applies its styles top down and green is the last reference of the element type.
you have to reference the full selector. that being said, the previous answers include the descendant selectors (which will not work) since the anchor element is the same as the class element. therefore something like this is what you're looking for
body
{
background-color: linen;
}
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
<a class = "myClass1" href = "http://www.youtube.com">Link1</a>
<a class = "myClass2" href = "http://www.youtube.com">Link2</a>
by not leaving the space between a and .Class1, the css denotes that they are the same element (versus the space in between them denoting descendant of)
hope this helps

Related

When two CSS rules have selectors with a common prefix, can the CSS rules be simplified?

/*
Style top-level <li>s' (i.e. each <li> not nested within another <li>)
background color to emulate Colombian 🇨🇴 flags (yellow, yellow, blue, red, repeat).
Also, the <li>s with blue and red bg should have white text to provide contrast,
but still keep their markers black.
*/
:is(li:nth-child(4n+1), li:nth-child(4n+2)):not(li li) {
background-color: yellow;
}
li:nth-child(4n+3):not(li li) {
background-color: blue;
/* color: white; */
}
li:nth-child(4n+4):not(li li) {
background-color: red;
/* color: white; */
}
:is(li:nth-child(4n+3), li:nth-child(4n+4)):not(li li) {
color: white;
}
:is(li:nth-child(4n+3), li:nth-child(4n+4)):not(li li) a {
color: white;
}
:is(li:nth-child(4n+3), li:nth-child(4n+4)):not(li li)::marker {
color: black;
}
Note the last 3 CSS rules have selectors which share a common prefix. If we let var be :is(li:nth-child(4n+3), li:nth-child(4n+4)):not(li li), then the selectors of the last three rules are:
var
var a
var::marker
Given this, can the CSS be simplified in any way?
HTML and CSS code
live page

CSS disable <a> hover

<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test

Why :hover does not work for the specified class

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

Using one class with different HTML elements

I am trying to simplify my CSS and can't get my head around why I can't apply styles to different element types with the same class.
For example, the below will only style all the .forum elements navy, but the other more specific styles are ignored. Is there a way around this?
EDIT http://jsfiddle.net/fWvxs/
HTML
<h1 class="forum">Forum Header</h1>
<p class="forum">Forum Content</p>
<small class="forum">Small deets</small>
CSS
.forum {
color: navy;
}
.forum h1 {
text-decoration: underline;
}
.forum small {
font-size: 2em;
}
Try this:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
Note that you used the wrong selector, .forum h1 means selecting the h1 which is one descendant of the .forum while h1.forum means selecting the h1 element having class forum.
it should be like this
h1.forum {
text-decoration: underline;
}
.forum h1 { //this applies to a h1 inside the .forum class element
text-decoration: underline;
}
this should work
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
You have problem in Css Style,
Correct CSS is:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
It depends also what you want to achieve. In case you want to have define a forum style. You better add the class for example to the div instead of each element individually. You would otherwise repeatedly adding the class forum to each element.
<div class="forum">
<h1>Forum Header</h1>
<p>Forum Content</p>
<small>Small deets</small>
</div>
.forum {/* PUT HERE THE FORUM DEFAULT STYLES WHICH ARE COMMON LIKE IE. COLOR, FONT-SIZE */}
.forum h1 {/* PUT HERE H1 FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum p {/* PUT HERE P FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum small {/* PUT HERE SMALL FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
On the other hand if you need to apply a forum style to an individual element like a p and not the other elements you add the class to the element directly.
<div>
<h1>Forum Header</h1>
<p class="forum">Forum Content</p>
<small>Small deets</small>
</div>
p.forum {}

How to prevent "a" styling from applying to a link?

I am trying to create a banner for my site without using an image. However, that banner is also a link.
Is there a way for me to override the use of the "a" (link) CSS styling from my div?
Assume the CSS looks like this:
a:link, a:visited {
color: #176093;
}
#logo {
color: red;
font-size: 48px;
}
In other words, I'd like the CSS definitions for #logo to override the definitions for links.
Converting comments to answer:
Using this, you can specify styles within a given container:
#logo a {
color: red;
/* ... */
}
If you only want to apply your styles to the anchor within the div #logo, you have to use a selector like this:
#logo a {
color: red;
font-size: 48px;
}
If the HTML is like this;
<div id="logo">Banner Text</div>
then use CSS
#logo a:link, #logo a:visited{color:#176093;}
If HTML is like this
<a id="logo" href="#">Banner Text</a>
Then use CSS
#logo:link, #logo:visited{color:#176093;}
Your issue is the specificity of your selectors :link and :visited, you should override those as well:
#logo {
font-size: 48px;
}
#logo:link, #logo:visited {
color: red;
}