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.
Related
So I have a div with class='content' and inside that, another div with attribute style='background-color:#FF0000' so my code looks like the following:
<div class='content'>
Here is some text outside the red background div
<div style='background-color:#FF0000'>
Here is some text inside the red background div
</div>
</div>
And in my stylesheet I have the following:
[style^='background'] {
color:#00FF00
}
This works and I get green text inside the red background. However:
:not([style^='background']) {
color:#00FF00
}
This still makes the red background text green, along with everything else in the document. I have tried the following:
div:not([style^='background']) {
color:#00FF00
}
.content :not([style^='background']) {
color:#00FF00
}
:not([style]) {
color:#00FF00
}
Yet all of these make the red-background text green, when clearly I have the :not selector.
However, I have elsewhere:
.content div:not([style^='text-align']) {
color:#1f1f1f;
}
.content div :not(span[style^='font-size: 150%']) {
color:#EEE;
}
And these work just fine.
So I don't understand why the red background div won't work at all and is selected by the :not selector?
Example:
:not(.content) {
color:#FF0000
}
<div class='content'>
Here is some text that shouldn't be red
</div>
color is an inherited property. So if your element has no color set, it inherits the color from the next ancestor element that has a color defined. In your example,
:not(.content) { color: #F00; }
this also targets the body element, so your div.content inherits color: #F00;.
To avoid this, specify inherited properties on the elements you don't want inheritance on.
.content { color: green; }
:not(.content) {
color: red;
}
<div class="content">
Here is some text that shouldn't be red
</div>
Quirks, tricks, and unexpected results of :not
:not(.foo) will match anything that isn't .foo, including <html> and <body>.
You need to increase specificity to avoid this, e.g. div:not(.content).
In addition:
div:not([style^='background']) {
/* also targets parent divs */
color: #00FF00;
}
.content :not([style^='background']) {
/* You have a space here - this targets _children_ of .content
that are :not([style^='background']. Is this what you want? */
color: #00FF00;
}
Remember that the "C" in "CSS" stands for cascading, and one aspect of that is inherited styles. Many styles (such as color) affect children of matched elements too, not just the element itself.
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>
Let's say I have following CSS :
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
and my markup is :
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
My question is Does the CSS above translate to :
body {
color: blue;
}
div {
color: green;
}
#alert{
color: red;
}
or is there an additional
* {
color: red;
}
Without variables the universal selector applies the same CSS on all elements. Does this change and the styling becomes dependent on elements?
One more question I have is if :root translates to body in CSS.
Here is a CodePen demo : http://codepen.io/anon/pen/RrvLJQ
As you've correctly stated in your title, custom properties cascade. In fact, this is why the module is called CSS Custom Properties for Cascading Variables. That means your custom property --color is evaluated as-is per element, just as with any other CSS property. In terms of the actual styles that are applied to your elements, what you really only have is:
* {
color: var(--color);
}
The var(--color) value is then evaluated for each element based on how the --color property cascades. So it follows that:
The body element has a blue foreground.
Any div elements have a green foreground.
The element whose ID is "alert" has a red foreground.
Because you don't have a --color definition for *, it's inherited by default. Therefore all other elements inherit --color from their parent element: body > p inherits from body, becoming blue, and #alert > p inherits from #alert, becoming red.
If you really do want to express the cascaded values in terms of CSS, you could say that it translates to the following:
:root {
color: blue;
}
div {
color: green;
}
#alert {
color: red;
}
* {
color: inherit;
}
But only because the original CSS contains an explicit * { color: var(--color); } definition which ensures that every element's color maps to --color.
Note also that the code that you have comes from an example within the spec, which itself is described as follows:
If a custom property is declared multiple times, the standard cascade rules help resolve it. Variables always draw from the computed value of the associated custom property on the same element
One more question I have is if :root translates to body in CSS.
:root doesn't translate to any element in CSS, because CSS is document language-agnostic.
:root doesn't translate to body in HTML; it corresponds to html.
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 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