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>
Related
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;
}
For example, given these two rules
p { color: red; background: yellow }
p { color: green }
paragraphs would appear in green text. They would also have a yellow background however, because the first rule is not completely negated. Its value for the color property is overridden by the second rule but its background-color is not in conflict, so it still applies.
So Is there anyway to stop applying background color property?
I am requiring such method because first rule may have n no. of attributes which i don't know beforehand.
looking forward for positive reply.
That's why you can define classes in CSS.
The style defined for the same element will be always overwritten if there are duplicated properties and inherited from the previous definition for the same element.
Try:
CSS
p.red { color: red; background: yellow }
p.green { color: green }
HTML
<p class="green">Some text</p>
<p class="red">Another text</p>
Define a class to each <p> element. Set CSS style for each defined class.
HTML File (index file)
<p class="content-1">This is content 1</p>
<p class="content-2">This is content 2</p>
CSS file (style.css)
p.content-1 {
color: red; background: yellow;
}
p.content-2 {
color: green;
}
JSFiddle: http://jsfiddle.net/SCLP8/
You can add the background property to your own CSS like this:
p { color: red; background: yellow; }
p { color: green; background: none; }
There won't be a yellow background.
I am having problem with nested CSS declarations for nested elements. Emm.. It's really hard to describe the problem, if you don't get what I mean, please just go to the jsfiddle link I provide below, you would understand what's the issue.
Here is the markup
<div class="red">
<h1>should be red</h1>
<div class="blue">
<h1>should be blue</h1>
</div>
</div>
and here is the CSS:
.blue h1 {
color: blue;
}
.red h1 {
color: red;
}
Notice that I put .blue h1 before the .red h1 declaration. But I have .blue element as a child of .red element. Please see the output on the jsfiddle. It shows wrong color on the .blue h1 element. However if I swapped the declaration into .red h1 first and then .blue h1, it's all fine. But I CAN'T do that in my real case and moreover if I swap the declaration, it won't work if the markup is also swapped. Vice versa.
http://jsfiddle.net/N7FcB/
Anyone got an idea how to solve this one?
PS: I know that having direct child selector will solve the problem. But I avoid to use it, because the element I am targeting (<h1>) is not always a direct child of the element with the class.
Thanks before :)
Update:
Imagine I have this kind of declaration
.red h1 { color: red }
.green h1 { color: green }
.blue h1 { color: blue }
.gray h1 { color: gray }
/* and so on */
I can freely create my markup whether it's blue inside red or the opposite or gray inside red which is inside blue. It should work well in any conditions I write the nested markup.
Update:
I think everyone does not really get what I am seeking here, please check out this new fiddle, it has better understanding of what I want. the first case is the false one, the 2nd case is the right one.
http://jsfiddle.net/kmMXW/9/
If you do not want direct child selector, just add a parent reference for the nested elements.
This will make your thing work.
You can add the below.
.red .blue h1 {
color: blue;
}
WORKING DEMO
To enforce your div to render the color blue, you just need to add the reference of the element that you are using to the class.
for Instance,
div.blue h1 {
color: blue;
}
WORKING DEMO - 2
In both cases, it will work.
Browser reads your CSS from top to bottom and it will apply in the same way..
So first you have a rule called
.blue h1 {
color: blue;
}
So browser will parse this information and will color your h1 as blue, but it goes ahead and it hits second selector which is
.red h1 {
color: red;
}
Now, as your h1 which is nested inside .blue is further nested inside .red and also, the specificity of both the selectors are same, browser will go ahead and apply red to the inner h1.
So what's the solution?
If you can, just swap the order of your classes... No? You cannot? than use a specific selector..
div.blue h1 {
color: blue;
}
Demo
The above selector is more specific compared to .red h1 as it has a class, and 2 elements... so here, browser will pick up first rule as it is more specific, thus overriding your .red h1 selector.
You can make your selectors specific as much as you need, you can write the above as div.red div.blue h1 or .red .blue h1, but just remember, the more specific selectors you use, the more you hit performance bar, also you will end up writing more and more specific selectors inorder to override others, so choose wisely..
hope it will help you
.red > h1 {
color: red;
}
.blue h1 {
color: blue;
}
select as direct child you will not face any more problem.
Or maybe like that:
.red > h1 {
color: red;
}
.blue h1 {
color: blue;
}
fiddle.
This is 100%.
how about this?
div.red > h1 {
color: red !important;
}
div.blue > h1 {
color: blue !important;
}
or throw div element
.red > h1 {
color: red !important;
}
.blue > h1 {
color: blue !important;
}
http://jsfiddle.net/N7FcB/6/
.blue > * {
color: blue;
}
.red > * {
color: red;
}
You can always try ">" selector combined with wildcard
myfiddle
Actually how many H1 do you need inside a div? i say not much. so why don't why give the class to the H1.
h1.red { color: red; }
h1.green { color: green; }
h1.blue { color: blue; }
Update
How about having a box with depth level, see fiddle http://jsfiddle.net/AnL7R/
by having linked classes you can override the upper one, e.g:
.blue,
.blue.first,
.blue.second
/*more depth class*/
{
color: blue;
}
.red,
.red.first,
.red.second
/*more depth class*/
{
color: blue;
}
Hope it helps
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }
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.