How to set up hover effect for all elements with only one declaration?
Example:
#element1: hover, #element2:hover, #element3:hover, #element4:hover {
background: color
}
I want to say :hover only one time.
How to use a shorter way?
You could instead just give a class to all of the elements that you want to have the hover effect.
After that, you would only need one css call:
.myHoverClass:hover {
/* My code here */
}
*:hover { color: red; }
An Asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
You can but it's not recommended as it can lead to some odd cascade or specificity issues.
Use the universal selector
*:hover {
your styles here
}
Related
I was creating a navbar that has a class top-navbar. I included a few anchor tags in the div. When I used the CSS property color: black on the class, the anchor text was still blue(the original color). Instead when I used the property color: black on the anchor tag itself it works? Why doesn't it work on the class property, isn't it inherited by all elements that follow in the div with class = nav-bar-items The markup is as follows:
<div class="top-navbar">
<img class="logo-img" src="https://freesvg.org/download/47093">
<div class="nav-bar-items">
about
notes
contact
</div>
</div>
There are lot of solution you already know how to turn your anchor text black.
But your question was why is is not inheriting? Here is my explanation of why it didn't work for you for provided css.
CSS Specificity
Rule to calculate specificity is defined by {style, ids, [classes, attributes and pseudo-classes], [elements and pseudo-elements] }
If we calculate the specificity of selectors on anchor tag, we will have the answer.
a:-webkit-any-link (User Agent) -> 0011 (1 for pseudo-classes and 1
for element)
.top-navbar -> 0010
So clearly here user agent styling wins and take over so the color is still blue, check below snapshot.
Reference to read more about it -
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://specificity.keegan.st/
https://css-tricks.com/specifics-on-css-specificity/
I honestly don't know why and I am pretty sure it was already answered here on SO, but why even bother with it when you can just target your links? Just some Examples, there's even more ways:
.nav-bar-items a {
color:red;
}
.nav-bar-items > *{
color:red;
}
Read about selectors:
CSS_Selectors
The a tags are getting browser default styling and need something more specific to override it:
.nav-bar-items a {
color: black;
}
The <a> tags are loaded with default styling properties. There are different methods to customize.
1. By using inheritance
.nav-bar-items > a {
color: inherit;
text-decoration: inherit;
};
2. override
.nav-bar-items a {
color:color-name;
};
3. This one is only, if your parent class has a single child <a> tag then you can use it.
a:only-child {
color: color-name;
};
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
I am trying to change the font for the whole page in HTML. By whole I mean everything: buttons, forms, etc. Is there a way to do this in CSS?
html {
color: green;
}
This would make the text green, but not the text of buttons.
Well, there's universal selector:
* {
color: green;
}
Take note, though, that specificity of this selector is the lowest (MDN).
Wild card selector
* {
color: green;
}
It may be the case that you need to over ride inline CSS and javascript generated CSS. In this case use !important as well
* {
color: green !important;
}
Use the * universal CSS selector.
The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector.
The selector div * will match the following em elements:
"Universal" in the h1 element ( matches the <h1> )
"emphasize" in the p element ( matches the <p> )
"not” in the first li element (matches the <ul> or the <li>)
"type” in the second li element (matches the <ul> or the <li>)
Example:
This rule set will be applied to every element in a document:
* {
color: green;
}
Also to add, it's compatible with most browsers, although it can be buggy in Internet Explorer 5.5, 6.0, 7.0.
If you don't need to support IE < 8, and want something that's less smelly, set an explicit color only on html and force everything else to inherit the color. Colors are already inherited by default on most elements, but not all of them.
Since this means applying two different color declarations, you will need two separate rules:
html {
color: green;
}
body * {
color: inherit !important;
}
Honestly, you shouldn't rely on a wildcard selector for doing this. You should take advantage of CSS's native inheritance. The best thing to do would be to remove the specific color declarations from your stylesheet (as needed) and add the color to your body or html tag. Using a wildcard is similar to this, except you are declaring that every single element should have the CSS as apposed to the native inheritance.
The HTML:
<span class="foo">Hello</span>
I want the CSS class "foo" to be defined as follows: the first letter of the enclosed content is red, and the rest of the characters are green. Is this possible?
EDIT:
What if I want something like the opposite? I want the first letter to be EXCLUDED from any styling (except any parent styling), and all the rest of the letters to be green.
Use the first-letter pseudo selector:
.foo { color: green; display: inline-block; }
.foo:first-letter { color: red; }
Here's the fiddle: http://jsfiddle.net/ZLapy/
Note: the :first-letter selector will not work on an inline element.
You have to use either block, inline-block or table.
Yes, :first-letter pseudo selector.
span.foo:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Yes, you can use the first-letter pseudo element to do this.
Example:
.foo{ color: red; }
and
.foo:first-letter{ color:green; }
The first-letter pseudo element (hence the name) will change the property of the first letter in the span.
You can read more on how to do this # http://www.w3schools.com/cssref/sel_firstletter.asp
EDIT:
If you want to do the opposite, and have the first letter be excluded from the style, the easiest way would be to exclude the first letter from the span entirely. You could also change the color of the first letter to the color of the rest of the text on the page (default color) .
Here's a simple example of what I'm looking to do.
I want to define a css rule for a 2 gradient backgrounds - blueGradient and greenGradient.
I want all elements with css class foo to have the blueGradient rule, and on hover have the greenGradient rules.
So, here's how I want my HTML to look:
<div class="foo">Hello</div>
This should have a blue gradient normally, and green when I hover on it.
Ideally, I want my CSS to look like this (I know it's not legal):
.blueGradient {
...
}
.greenGradient {
...
}
.foo {
<#include blueGradient>
}
.foo:hover {
<#include greenGradient>
}
What's the best way to achieve this?
If something like this isn't possible, what's the best way to achieve this without having several copies of the blue/greenGradient definitions all over my CSS rules?
I know I can change my HTML to look like this:
<div class="foo blueGradient">Hello</div>
But then, how do I deal with the hover (I don't want to use JS)?
For rules that you want to apply to more than one selector, just separate them by commas:
.blueGradient, .foo {
/** blue gradient styling **/
}
.greenGradient, .foo:hover {
/** green gradient styling **/
}
In the same CSS file (and, indeed, in different files if you like) you can define styles for the same selector as many times as you like, so you can also define .foo and .foo:hover styling that will only be applied to these selectors, and will not shared with other .blueGradient and .greenGradient elements:
.foo {
/** foo-specific rules **/
}
.foo:hover {
/** foo:hover-specific rules **/
}
This does not require you to change your html. Where the same attribute is defined in both entries with different rules (e.g. margin: 0; and then later margin: 10px;) the last entry takes precedence.
If you also want the blueGradient styles to be applied to yet another selector .bar, just add it to the chain:
.blueGradient, .foo, .bar {
/** blue gradient styling **/
}
(Note in the example above, the .blueGradient and .greenGradient selectors are not required, unless they are being used elsewhere. You could replace them instead with a code comment that stated this was where the gradients were being applied if you wished.)
Using just CSS, the best way to accomplish this with minimal repetition of code is to do something like the following:
.blueGradient, .foo {
...
}
.greenGradient, .foo:hover {
...
}
Using a comma in your selector allows you to assign a block of CSS to multiple elements/IDs/classes at once.
You can't quite do what you're proposing in plain CSS. You might looking to using LessCSS. It has a feature called Mixins:
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
I know that's JS, but it wouldn't require you yo learn JS, just stick it on the page.
Otherwise you're stuck with what Justin Michael and others have said. Which is certainly good enough for most cases. Part of what you may need to do here is to train yourself to think in CSS rules.