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?
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.
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
The page I am working on has many different CSS files attached to it, a boostrap.css, the master.css and a custom.css file.
I'm trying to remove a property, as I don't want there to be a a:hover property on the link in a menu. The master CSS file has
#topSurround a:hover {
color: #ffffff;
}
The bootstrap CSS file has
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
I don't want to edit these files, as they are core files with the template I am using and could be updated, so I am using a custom CSS file. Normally, I would set the property to default to override any previous uses of the property.
#topSurround a:hover {
color: none; (doesn't work, as this isn't the correct default)
}
So, two questions: What is the default value for the color property (there doesn't seem to be one)? Is there an easier way to go about this without having to overwrite the core files?
You can use color: inherit to have the color use the value from its ancestors. color is odd in that it has different default values depending on context. A link, for example, will typically default to blue, while text will default to black.
If you need to override the existing style, don't use a more specific selector. Raising the specificity means that you'll just have to use more selectors the next time you want to override it.
Instead, take advantage of the cascade by using a selector with identical specificity and make the override happen after the original style:
/* older style in some library */
.foo .bar .baz {
color: blue;
}
...in an overriding CSS file...
.foo .bar .baz {
color: green;
}
To cancel out the property you can use unset keyword.
So, in you custom css file you can do something like following:-
#topSurround a:hover {
color: unset;
}
According to the MDN Web Docs:-
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
The best way is to make a more specific CSS rule, such as:
body #topSurround a:hover {
color: transparent;
}
Specificity is an important CSS concept, as described in this article:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I'd recommend trying:
#topSurround a:hover {
color: inherit;
}
As for how to overwrite what Bootstrap is adding, I think how you were doing it is best.
Every CSS style has a natural default value. It's just not always none.
Some may be 0 (as in zero).
Some may be auto.
Sometimes inherit is the best option.
Colours can be set to transparent.
If you're unsure what the default is, try creating a dummy page with just a plain unstyled element, and use the browser dev tools to see what the styles are set to.
Hello I'm having some issues with CSS on my blog. My Wordpress theme has a post styles section in the CSS file which have a class "Entry" in which "a" attribute is defined for the links inside the article area.
I generated a button from css generator and inserted the button in an article that is pointing to some other website using href. My CSS file has something like this,
.Entry a{color:black;text-decoration:underline};
.button {background:black;color:white And some other Styling};
I used this code to display the button.
Go to this link
Without the use of class="button", the link follow the Entry a property. But when I use class with it, it display the button with the mixture of Entry a and class button styles. I don't want the button to use Entry a properties. Any help?
You could rewrite the first rule using the CSS3 :not pseudo-class selector as
.Entry a:not(.button) {color:black;text-decoration:underline}
This will do what you need, but it's not supported by IE versions earlier than 9.
A true cross-browser solution is more involved: you would need to "undo" the attributes that .Entry a applies in your .button rule. For example:
.Entry a {color:black;text-decoration:underline}
.button {color:white;text-decoration:none;background:black}
Update: I forgot something quite important.
If you do go the "undo" route you will need to make sure that the "undoing" selector has specificity at least equal to that of the first selector. I recommend reading the linked page (it's not long) to get to grips with the concept; in this specific case to achieve this you have to write a.button instead of simply .button.
For avoid .Entry a CSS styles to be applied at when you use the selector .button you should overwritte with the selector .button all the properties defined in .Entry a
For example:
.Entry a{color:black;text-decoration:underline};
.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
This happens because .Entry a has a higher specificity than .button. The result is that your element receives its actual background property from .button but its color and text-decoration properties come from .Entry a.
There are a few ways to "fix" this:
Increase the specificity of the .button selector.For example, if you only use .button on a tags, you could change the selector to a.button. This new selector would have the same specificity as .Entry a (one tag value and one class value), so the "winner" is decided by the source order. If a.button comes after .Entry a in the CSS file, a.button takes the upperhand.
Decrease the specificity of the .Entry a selector.Do you really need to target only a tags inside .Entry elements? Can you get away with simply making it a base style for all a tags? If you can, you can simply change .Entry a to a. This new selector has only one tag value, which is less specific than the one class value in .button.
Define extra selectors on .button.For example, you could use .button, a.button so that the second selector takes over where the first selector fails. Be warned that this could get very messy when you encounter this same problem with other tags such as input or button tags.
Use !important.Never do this, as you'll get yourself in trouble if you ever try to make a .big-button class which needs to override some .button styles.
If you want to learn more about specificity, here's a good article about what it is and how it's calculated.
Well in CSS3 you could do this:
.Entry a:not(.button)
That will restrict your .Entry a rule from affecting any elements with .button.
If CSS3 is not an option (i.e. you need to support IE <= 8) you'll need to overwrite whichever inadvertent styles are being inherited. So for example if your button is ending up with an unwanted border from .Entry a, overwrite this in your .button rule, e.g.
.button { border: none; /* more button styles */ }
You could overwrite any styles in .button class that are defined in .Entry a
E.g. if you dont want your text to be underlined you could use text-decoration: none
.Entry a{
color: black;
text-decoration: underline;
}
a.button {
background: black;
color: white;
text-decoration: none;
/*And some other Styling*/
}
Also don't use semicolons after braces }; in your css. simply use a brace to close }
The simplest thing would be to "undo" the specific styles that your element inherits from the styles for .Entry a. For example, to undo the text-decoration style, you could use text-decoration:none.
If you only need it to work for newer browsers, then you could use the not() selector #Jon has mentioned.
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.