It may just be me, but sometimes I think im starting to get the hang of this css stuff' and then it goes back to 'I dont have a clue.'
so, I have a default style
a:focus,
a:hover,
a:active {
outline: 0 none;
text-decoration: none;
color: #fff;
}
but on a couple of <a href..> I need to overwrite the style,
so I have added the following to my css
a.myBlue a.myBlue:hover {
color: #3078ef ;
}
.myBlue a:hover {
color: #3078ef ;
}
(Yes, I've done this twice)
and applied
But in Chrome, looking at developer tools its still applying the standard style, it does not even pull "myBlue" down?
Where am I going wrong?
The css selector:
a.myBlue a.myBlue:hover
Means "Any a of class myBlue that is being hovered over and is a child element of an a of class myBlue.
If you wish to apply the same style to multiple selectors, you need to separate each selector with a comma:
a.myBlue, a.myBlue:hover
There is a typo mistake in your code...Use below code. it works...
a.myBlue, a.myBlue:hover {
color: #3078ef ;
}
Your CSS selector is wrong, how you've got it present means it only applies the rule when you hover over an element with the class of .myBlue which is the child of another element with the class of .myBlue. So instead your selector needs to be
a.myBlue, a.myBlue:hover { /* notice the comma */
color: #3078ef ;
}
Related
In CSS properties, there are four pseudo selectors available to style your links. The selectors are a:link, a:visited, a:active, and a:hover.
Are you suppose to do this...
a:link{color:red;}
a:visited{color:blue;}
a:hover{color:green;}
a:active{color:yellow;}
This worked, but is there a shorter and/or simpler way.
If you want different rules for each pseudo target, then the way you have it written is the shortest you can make it. Had the rulesets been the same, you could simply comma delimit the selectors:
a:link, a:visited, a:hover, a:active { color: red; }
In the above example the ruleset for each pseudo is the same, so it in turn can be shortened to:
a { color: red; }
When using these specific pseudo classes, be aware that order matters when declaring rulesets:
To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
In plain css that's the simplest way, if you want to style the 'a' tag for different sections of your app you can use classes or ids, an example using classes is:
HTML
<div class='classOfSomeSection'>
This link is red
</div>
<div class='classOfAnotherSection'>
This link is green
</div>
CSS
.classOfSomeSection a:link{
color:red;
}
.classOfAnotherSection a:link{
color:green;
}
There are other methods involving Javascript to change pseudo classes of specified elements but in my opinion, css is simpler.
If you use SCSS, you can do it by creating a mixin. It seems longer up front, but the upside is that you write the mixin once and then just include it with one line wherever you need it.
// set up vars for each state you want
$link: #00a400; // green
$visited: #870808; // deep red
$hover: #8ee1ff; // blue
$active: #df42f4; //pink
// set up mixin
#mixin link-color($color) {
color: $link;
&:visited {
color: $visited;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
// use mixin
a {
#include link-color($link);
}
Fiddle
So the answer to your question is yes, in that you can write it shorter, and no, in that you have to write something a little bit long somewhere. Ideally, squirrel your mixins away in a file all their own so you they don't clutter your view.
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}
I got this code:
<div class="class1">text</div>
CSS code of class1 is following:
.class1 {
text-decoration: none;
}
The output looks on, until I move the mouse over the div. The text is underlined then.
Sure, I've tried a lot of methods like:
.class1:hover {
text-decoration: none;
}
I've also tried to add a !important attribute, but still without expected results. :/
I've also used firebug to debug the HTML & CSS code, and I can't find any class with attribute text-decoration: underline;.
I know this is such a silly question, but I'm out of ideas.
You should set the text-decoration property to none for the a element inside of .class1, since that is the element that contains the text (and likely the element that you are hovering on).
For example:
.class1 a (all a tags whose ancestor is .class1)
OR
.class1 > a (all a tags whose parent is .class1)
If you're setting a global <a> property elsewhere, you'll need to specifically override the <a> tags for that class.
.class1 a { text-decoration: none; }
and
.class1 a:hover {text-decoration: none; }
depending on if you have a global hover defined too
div.class1 a { Properties:values}
Would be a good practice.