Suppose I have this HTML:
<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>
with this CSS
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there's an easier way to do it with just CSS.
Thanks for your suggestions.
CSS is parsed in order, meaning that if after you define
.SomeClass:hover { color: red; }
You then define a rule
#SomeId.SomeClass:hover { color: blue; }
That should 'overwrite' the initial color: red;
Just assign another rule to the div with an id of SomeID. This will override the other rule.
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}
jsFiddle example
Just overwrite the style:
#SomeID:hover {
color:blue;
}
Alternatively, you could use:
.SomeClass:not(#SomeID):hover {
color:red;
}
Then it is easier to change it, but less browser support.
Let's take a look at link pseudo-class specificity:
Remember: LAHV (:link, :active, :hover, :visited).
First, in order to cascade properly, let's assign the following to .SomeClass:
.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }
Next, let's specify #SomeID:
#SomeID:hover { color: blue; }
id always takes precedence over class.
Related
How can I possibly apply a style to a parent div but not the <strong> child. I've tried various ways of :not selector but none of my tries succeeded.
Here's what I came up with
.total:not(strong) {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
I know I can do apply the styles to those separately but I am looking for a :not way of doing it so I can do it on one line.
I also know I can give <strong> a class and do .total:not(.strong-class) but why doesn't it work the way I try it originally?
The :not rule refers to the target element. Your rule .total:not(strong) is translated to apply the styles (color: gray) to an element with class .total, which is not a strong node (the <strong> tag). Since the .total node is div, the rule still applies.
Reset the strong's color to initial or choose a different color:
.total {
color: gray;
}
.total strong {
color: initial;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
Check the default css of color in the element strong.
.total:not(strong) { works fine, but the default color is gray too!
:not
*{color:blue}
.total:not(strong) {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
You can use this code
body {
padding: 0;
margin: 0;
}
.total {
color: red;
}
.total strong {
color: gray;
}
<div class="total">Baloons <strong>$3.75</strong></div>
<div class="total">Pens <strong>$1.99</strong></div>
HTML
<div data-countdown="2016-12-10 01:17:26">
<div class="countdown-text">noch</div>
<div class="countdown-val">2</div>
<div class="countdown-text">Tage</div>
</div>
CSS
.countdown-val {
color: red;
}
.countdown-text {
font-size: 13px;
}
Values from .countdown-val class are not applied. When I change the order of classes within the css file the same thing happens vice versa. I am using a bootstrap built theme, but I cannot explain this behaviour. Can anybody else please?
you just try this.
.countdown-val {
color: #ff0000;
}
otherwise.you can add !important
.countdown-val {
color: #ff0000 !important;
}
CSS is fine.
Check your closing brackets {} in your code.
In your bootstrap file, make sure your classes aren't nested under another class.
seems like some other css is overriding yours
use
.countdown-val {
color: red !important;
}
.countdown-text {
font-size: 13px !important;
}
or change the class names to some other unique names to be sure that the divs style is not affected by other css
I want to apply a css rule to everything (* { color: red; }).
But, how can I do this without the need for Javascript or applying a class to everything I want it to be applied to?
Something like:
*:not-type(div) {
color: red;
}
And the document would be:
<span>this is red</span>
<span>this is red</span>
<div>this is not red</div>
Try like this:
*{
color: red;
}
div{
color: blue;
}
To select everything except div elements you would write:
:not(div) {
color: red;
}
Caveat: while this rule correctly selects all elements except div, it does not prevent a div from inheriting red color from its parent which is the default behavior.
Try like this:
:not(div){
color: red;
}
I am using a stylesheet that looks a bit like this:
.base-slider {
width: 100%;
.ui-state-default {
border: none;
}
.ui-state-default:nth-of-type(1) {
background: url('left-end-arrow.png');
}
.ui-state-default:nth-of-type(2) {
background: url('right-end-arrow.png');
}
/* loads of other style stuff */
}
.secondary-slider {
.ui-state-default {
background: url('single-point-arrow.png');
}
}
Then in my html I have something like:
<div id="slider" class="base-slider secondary-slider">
X
</div>
The problem I have is that I am seeing the 'left-end-arrow.png' on my secondary-slider element rather than the 'single-point-arrow.png' which is what I was expecting
I am guessing that is because nth-of-type(1) makes the base-slider selector more specific than the child one. Is this correct? And if so, is there any CSS way to say "ignore any previously added pseudo-classes on this element"?
You could use :nth-of-type(n) to override the previous pseudo classe styles like this :
DEMO
.secondary-slider .ui-state-default:nth-of-type(n) {
background: url('single-point-arrow.png');
}
OR
You can make the second CSS style more specific as you have two calsses on your container, you can use both like this :
DEMO
.base-slider.secondary-slider .ui-state-default {
background: url('single-point-arrow.png');
}
Okay this is the css code I put on the master page so it applies all the child page as well :
Master.css
a
{
color:Red;
}
a:hover
{
color:Blue;
}
and now on some pages I need to change color and hover color of the links like :
Some child pages
a
{
color:Gray;
}
a:hover
{
color:Maroon;
}
But the problem is it won't change the way I defined later. I used specific id and class approaches but they also don't work.
When I wanna change some specific element style, I use inline style attribute to do it but now :hover comes into play and I don't think I can declare it inline.
CSS chooses between conflicting specifications by how specific the declaration is.
You can increase the specificity by specifying classes, ids, or adding !important to the end of your css declaration. For example:
a:hover
{
color:Maroon;
}
will be overridden by
a.link:hover
{
color:Blue;
}
will be overridden by
#link1:hover
{
color:Red;
}
will be overridden by
a:hover
{
color:Green !important ;
}
I used specific id and class approaches but they also don't work.
Can you clarify?
Using specific selectors is the way to go. An example.
There I define common a look for the whole page.
a {
color:Red;
}
and custom style for specific areas where I want it to apply.
.new-look a {
color: Gray;
}
your HTML markup is equally important.
a { color:red; }
a:hover { color:blue; }
a.foo { color:green; }
a.foo:hover { color:black; }
red
green
will work, unless something else is at play.
or as the other post suggests ~
.foo a { color:red; }
#bar a:hover { color:blue; }
remember IDs take priority over classes.