I want all the anchor links within a <div class="status-outer"> to be white, except for those anchor links that are inside an <li> tag that is inside a <ul class="dropdown-menu"> tag.
Searching around, I came up with the following. Unfortunately, it doesn't work. It seems none of my anchor links are white.
.status-outer a:not(ul.dropdown-menu > li > a) {
color: #fff;
text-shadow: none;
}
Can anyone help me find the problem?
Note that I have found other articles about exclusion syntax (that's how I came up with the code above), but I couldn't find any examples that were specific to my needs.
.status-outer a { color: #FFF; }
.status-outer .dropdown-menu li a { color: #000; }
The negation pseudo-class, :not(X), is a functional notation taking a simple selector
You'll need to do something like this:
.status-outer a { color: white; }
ul.dropdown-menu > li > a { color: inherit; }
Not sure, whether color may be inherit.
Add a second class to those list elements that you don't want to be white, with a CSS "color" rule to overwrite the previous.
The :not() pseudo-element can only take simple selectors, which basically means single things, such as body, #id, .class, or [attribute]. You can't specify an entire selector within it.
You'll have to specify two separate selectors. One that sets the anchor to white, by default, and another that sets it to inherit the color of its parent element, if its contained within a list.
.status-outer a {
color: #fff;
text-shadow: none;
}
.status-outer ul.dropdown-menu a {
color: inherit;
}
The only problem you'll run into is that text-shadow does not have an inherit value, meaning you can't re-add it as its parent's value once you've removed it, you'll have to re-specify it. I don't know if that's 100% applicable here or not.
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have a link in a class like this:
<div class="brand">
amazona
</div>
And I changed link color and link:hover color like this:
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
It works perfectly. But when I change the link color in the div like this:
.brand a{
color:brown;
}
The link color is brown even I move the mouse over it. I expect the hover color to be red. Why does it happen? and how can I fix it?
To solve this problem first you need to understand CSS specificity (visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).
And if you are using .brand a CSS is becoming more specific, hence on a:hover also you need to add more specific CSS like .brand a:hover
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
.brand a{
color:brown;
text-decoration: none;
}
.brand a:hover{
color:red;
}
<div class="brand">
amazona
</div>
I am going to take a shot at answering this because I feel it can be better clarified. As mentioned above, a deeper understanding of the CSS language is needed, specifically a deeper understanding of CSS selectors, and how they work.
CSS implements the code you write with in your style-sheet according to order, what was write first is computed first, what was written last is computed last, therefore; if you write:
.some-txt{
color: red;
}
.some-txt{
color: blue;
}
.some-txt{
color: razzle-dazzle-purple;
}
then the text with class some-txt is going to be the color, 'razzle-dazzle-puple'.
This is becuase razzle-dazzle-puple was the last color in the order of assignment given. In your code you gave the color brown to a after red, canceling your previous assignment. To fix this you either be more specific with your selectors like so:
.brand a:hover {
color: red;
}
or just simply try moving things around, I tested your code and I think what you were looking for is this:
a {
color: green;
text-decoration: none;
}
a {
color: green;
text-decoration: none;
}
.brand a {
color: brown;
}
a:hover {
color: red;
}
remember when you add hover to a property, you are adding it to the property, so when you change that property, after you already assigned it a value, you are change the whole property. I hope this makes sense, some things are hard to explain, obviously the best way to understand something is by playing with it.
Because you specified every single link in a .brand div has the colour brown.
You can do
.brand a:hover {
color: red;
}
This will work :)
.brand a style is overriding the a:hover style. if you exchange the order of the two styles in your style-sheet it will work.
I have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue:
I have to disable the color change of an anchor tag when visited. I did this:
a:visited{ color: gray }
(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.
How can I disable the color change of an anchor tag when visited without doing any explicit color changes?
If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:
a, a:visited, a:hover, a:active {
color: inherit;
}
Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.
You can't. You can only style the visited state.
For other people who find this, make sure that you have them in the right order:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.
So if you want to disable the color change, a:visited must come before a:hover. Like this:
a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }
To disable :visited change you would style it with non-pseudo class:
a, a:visited { color: gray; }
a:hover { color: red; }
It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.
a:visited { color: LinkText; }
link
However note:
These values may also be used in other contexts, but are not widely supported by browsers.
It at least appears to work in Firefox 98 and Chromium 99.
If you use some pre-processor like SASS, you can use #extend feature:
a:visited {
#extend a;
}
As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.
As a compromise you can add #extend only in those block wich you really need.
For those who are dynamically applying classes (i.e. active):
Simply add a "div" tag inside the "a" tag with an href attribute:
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
Either delete the selector or set it to the same color as your text appears normally.
You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.
I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).
I think it's nice solution:
HTML:
<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>
CSS:
.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
a {
color: orange !important;
}
!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.
I want to do a dynamic word cloud and I was wondering if there is a way of changing the link colour in my html section, normally you just define the links colours in css something like:
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link { color: #0c3569; }
.tag_cloud:visited { color: #0c3569; }
.tag_cloud:hover { color: #ffffff; background: #0c3569; }
.tag_cloud:active { color: #ffffff; background: #0c3569; }
But I'm planning to do a word cloud were every word has a different colour, aka link/visited will colour will be defined dinamicaly, but is there a way of defining link/visited/hover/active inline in the html?
I Imagine it could be something like this
<a href="something" style="font:arial; ???"word</a>
Thanks.
It can't be done inline since :hover etc. are css pseudo selectors and won't work inline since that is not the intention of it.
But don't be afraid of using css classes - you will need some javascript anyway to make this work. Just define the classes you want to use like:
.cloud_item_1:link {color:red;}
.cloud_item_1:visited {color:yellow;}
.cloud_item_1:hover {text-decoration:underline;}
.cloud_item_1:active {color:black;}
.cloud_item_2:link {color:blue;}
.cloud_item_2:visited {color:orange;}
...
And than apply them to your html as you wish. No big deal here.
You would need to have some JavaScript to change the color on hover and check if the item is active.
Or you could define a class/id (dynamically) for each of the items and target them with CSS.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover