Is it possible to define a style this way? The class child in this example is red unless it's wrapped in a parent class where I want it to reset so that it takes the color defined in the style attribute of parent.
.child {
color: red;
}
.parent > .child {
color: _clear_;
}
<div class="parent" style="color:blue;">
<div class="child">Some Text</div>
</div>
I think color: inherit; for .parent > .child is what you are looking for:
.child {
color: red;
}
.parent > .child {
color: inherit;
}
<div class="parent" style="color:blue;">
<div class="child">This will be blue</div>
</div>
<br/>
<div class="child">This will still be red</div>
JSFiddle for sample
If you are using valid selectors, like in your example, you want to use inherit:
.child {
color: red;
}
.parent > .child {
color: inherit;
}
However, if you were looking for something more complicated like "style the child based on the parent not having a specific attribute", that may be out of reach with pure CSS. Also, some child elements may not be able to logically inherit a style from a parent, so be sure to set the "parent" style rule on a parent that the child can inherit from and that you have in mind for the rule (so not so high up the chain that you didn't intend that color for that scenario). For instance, in the above example if the parent did not have the inline style rule, there would be no color rule, so the child would pick up a value from somewhere higher up.
Related
I'm trying to achieve a scenario that a css rule should be applied to all selectors except one selector and whatever underneath it.
For example I want to apply the css on everything inside .parent but not including .child and its children.
I tried the following, but didn't work...
.parent *:not(.child *) {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
</div>
You can target the child class with its own rule using "unset" or "initial" or another reasonable default value:
.parent {
background-color: red;
}
.child {
background-color: unset;
}
This should target any direct child of .parent that doesn't have the class of child as well as its descendants:
.parent> :not(.child),
.parent> :not(.child) * {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
<div>
<div>outside!</div>
</div>
</div>
Why your selector didn't work
.parent *:not(.child *) {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
<div>
<div>outside!</div>
</div>
</div>
Target any descendant of .parent that doesn't have the child class.
While yes you aren't assigning the background-color to .child, you're assigning it to both of its children...
But I specified all descendants of .child within :not()
As with :is(), default namespace declarations do not affect the compound selector representing the subject of any selector within a :not() pseudo-class, unless that compound selector contains an explicit universal selector or type selector. (See :is() for examples.)
https://www.w3.org/TR/selectors-4/#negation
I'm still trying to fully understand this part of the spec myself, but I think it just means that you can't do compound selectors within the :not() pseudo class
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.
I need to override the children color when its parent has specific class.
.parent {
width: 100%;
}
.parent>.child {
color: black;
}
.parent>.child.blue {
color: blue;
}
.parent.error {
color: red !important;
}
.parent.error>.child {
color: red !important;
}
<div class="parent">
<div class="child">Child #1</div>
<div class="child blue">Child #2</div>
</div>
When the parent class is added with "error" using jquery $('.parent').addClass('error'), only Child #1 color changes to red. Child #2 (which has extra blue in its class) <div class="child blue">Child #2</div> stays blue.
The question is, how to force Child #2 to change its color to red without specifying .parent.error > .child.blue for error class.
/*If this style is added, it will work*/
.parent.error > .child.blue {
color: red !important;
}
Thanks...
without deeper brainstorming, my first reaction is:
CSS basic principle says - the more closer a definition is made, the more precedence it gets.
Thus the !important part is necessary to make things work.
Alternatively you could re-think the CSS definitions to the opposite ones.
The '.blue' take effect only when the parent's class does not contain .error.
A fast shot clue - something like this for the non-errorous case:
.parent:not(.error) > .child.blue {
color: blue;
}
I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.
I'd like to change the color of a div but this div have several classes :
<div class="container template-blog template-single-blog ">
If I use the following code will it change the background of all the divs with at least one of these classes or only the div with at least these 3 classes ?
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
If you have a several classes associated to an element e.g. the <div>, those classes will target that div element only.
However, if your <div> classes are being used anywhere else, it will however, change the background-color to lime green.
If you want one class to target one element and your not going to be using it anywhere, then maybe consider ids (#unique).
If you want to target that one element then consider doing the following:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Examples of usage: http://jsfiddle.net/kjLfq8b4/
div {
margin-bottom: 40px;
}
#uniqueItem {
color: red;
border: 1px solid green;
}
.oneClass {
background-color: blue;
color: white;
}
.twoClass {
padding: 10px;
}
.threeclass {
text-decoration: underline;
}
.oneClass.twoClass.threeClass {
height: 40px;
}
<div id="uniqueItem">This is a unique Item</div>
<div class="oneClass">This is one class</div>
<div class="oneClass twoClass threeClass">This is multiple classes</div>
Remove the spaces between classes names:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
This will mean that this style will be applied only when an tag matches with all the three classes.
Your CSS selector is actually like this:
"class 'template-single-blog' which has an ancestor with class 'template-blog' which has an ancestor with class container"
The best option is to add a class to that div and make a CSS rule for that class:
.new-class {
background-color: lightgreen;
}
If adding a class isn't an option, you should try saying "a div that has all of those classes". It is written like this:
div.container.template-blog.template-single-blog {
background-color: lightgreen;
}
To change the colour of all any div with one of these class names, you will want to add commas between the class names, like this:
.container, .template-blog, .template-single-blog {
background-color: lightgreen;
}
Without the comma nothing will change.
Will change nothing. You have selected the template-single-blog class in a markup like this:
<div class="container">
<div class="template-blog">
<div class="template-single-blog">
</div>
</div>
</div>
Just change the background on one of the classes, will work if nothing overwrites it.
.template-single-blog {
background-color: lightgreen;
}
or better add a new class
.background-single-blog {
background-color: lightgreen;
}
With your given markup:
<div class="container template-blog template-single-blog ">
This style:
.container .template-blog .template-single-blog {
background-color: lightgreen;
}
Will not affect anything. What that style declaration says is:
"For all elements with the class container, that have a descendant element with the class template-blog that contain children with the class template-single-blog elements, change the background of the element with the class template-single-blog element.
You could change the background of your div simply with this:
.template-single-blog {
background-color: lightgreen;
}
Which will change all elements with the .template-single-blog class across the site, regardless if they have any other classes.
If you want to get more specific, you can do this:
.container.template-blog.template-single-blog {
background-color: lightgreen;
}
Which will change only those elements that have all three classes.
I want solution using only CSS
we have 3 circle here.
Whenever I perform mouse-over on circles with class Name Mycircle , the circle with class Name BigCircle should change to red color
html
<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
CSS
.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}
.mycircle:hover .BigCircle{background:red}
Here is the demo >http://jsfiddle.net/JGbDs/4/
Thanks in Advance
In your comments you state that you cannot re-arrange the elements, but you can add ones if required.
For that reason the general sibling combintor in the accepted answer is not suitable as the .bigCircle element would have to come after all of the .myCircle elements.
There is no perfect way of achieving this using only CSS but it is possible by adding a "parent" element and using one of the following CSS solutions:
Solution 1
When hovering on the parent element, the .bigCircle child element will be coloured red:
Working example: http://jsfiddle.net/CKRef/
HTML
<div class="parent">
<div class="bigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* Add float to parent to fit width to content */
.parent {
float: left;
clear: both;
}
.parent:hover > .bigCircle{
background: red;
}
The issue with this solution is that the .bigCircle element will be coloured red when you hover anywhere on the parent, not just on .myCircle. Adding the float reduces this effect - but if you hover just outside of the circle then the .bigCircle will still be red.
Solution 2
Using the parent element as a relative container, we can add a new element to the page using the after pseudo selector when a .myCircle element is hovered over:
Working example http://jsfiddle.net/CKRef/1/
HTML
<div class="parent">
<div class="mycircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* replaced .bigCircle with mycircle:hover::after */
.mycircle, .mycircle:hover::after {
....
}
.parent {
position: relative;
}
.mycircle:hover::after {
content: "";
background-color: red;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
}
The imperfection with this solution is that we are targeting the position of the first child of the parent element, rather than the element with the class name .bigCircle. Also, the after pseudo selector is not supported in IE7.
No. That's not possible using just css. "Any sibling" selector is not there in css.
However, if you can move BigCircle to end, you can use general sibling combinator which can select successor siblings.
.mycircle:hover ~ .BigCircle{background:red}