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.
Related
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.
Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.
You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.
So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector
How could I make the following work?
.menu a {
text-decoration: none;
:active {
color: #666;
}
:link {
color: #666;
}
:hover {
color: #666;
}
}
I know its not valid (or at least id does not work), so how could I fix it? I would like to make it easier for the further programming, so I would like to put :(selector) inside the "a" tag.
Ps.: I really don't want to use SASS or any framework for this.
What you're showing in the code sample is not valid CSS.
I know you mentioned that you do not want to use SASS or any framework, but that's precisely why SASS and other CSS preprocessors (e.g. LESS) were developed. This article contains more information on CSS preprocessors.
Alternatively, you can repeat the "parent" selectors and indent accordingly:
.menu a {
text-decoration: none;
}
.menu a:active {
color: #666;
}
.menu a:link {
color: #666;
}
.menu a:hover {
color: #666;
}
I have two divs in a web page (say view_1 and view_2). I want the styles of the links in each div to be different. Let's say the styles of the links are as follows:
style of links in div view_1:
a:link {
color: #CB4C2F;
text-decoration: none;
}
a:visited {
color: #CB4C2F;
}
a:active,
a:hover {
color: #B60A00;
}
style of links in div view_2:
a:link {
color: #B5B5B5;
text-decoration: none;
}
a:visited {
color: #808080;
}
a:active,
a:hover {
color: #FFFFFF;
}
In the page, I want to specify only the div in use. I do not want to specify a style for the links; the links should adopt the styles from the div in which they exist. How may this be accomplished?
Add classes to your div's
View_1
.view_1 a:link {
color: #CB4C2F;
text-decoration: none;
}
.view_1 a:visited {
color: #CB4C2F;
}
.view_1 a:active,
.view_1 a:hover {
color: #B60A00;
}
View_2
.view_2 a:link {
color: #B5B5B5;
text-decoration: none;
}
.view_2 a:visited {
color: #808080;
}
.view_2 a:active,
.view_2 a:hover {
color: #FFFFFF;
}
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;
}