I have two situations:
<div class="parent">
<div class="content">TEXT</div>
</div>
or
<div class="content">TEXT</div>
I want to change text color if class parent is present or not.
I write this css but it doesn't work:
div:not(.parent) > .content{
color: blue;
}
How can I solve it?
It doesn't work because in the second example you have no div element wrapping the content so div:not(.parent) is not matched (.content is a direct child of the body element)
Either you write
:not(.parent) > .content {
color: blue;
}
(without defining the element) or just reverse your logic: give a basic style for .content in case there's no parent element and override the style if the .parent exists:
.content {
color: blue; /* no .parent */
}
.parent > .content{
color: inherit;
}
Related
Say I have a parent div with three child divs inside and I want to give each child a different background colour, can this be done with only one nth-child selector - my parent div has a class of "parent" and the three children have classes of "child1", "child2", "child3".
Thanks.
Yoy can't set 3 background-color in one selector (the 2 override by last defenition) as in image
I recommand you learn about selector in css:https://www.w3schools.com/cssref/css_selectors.asp
and more learn here(thanks to #Mosh Feu):https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
and: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
SO you have to do it as below:
.parent .child1{
background-color:red;
}
.parent .child2{
background-color:orange;
}
.parent .child3{
background-color:blue;
}
<div class="parent">
<div class="child1">one </div>
<div class="child2">tow </div>
<div class="child3">three </div>
</div>
You won't be able to do this with just one rule and just one selector.
In CSS, every rule applies a specific set of styles to all the elements that match its selector(s). This is a fundamental aspect of how CSS works. You can't have different declarations in a single rule apply selectively to specific elements — they will all just get overridden, leaving you with just one winning declaration that gets applied to all the elements that are matched. This is true even if you have multiple selectors in the same rule, and even if you use :nth-child() instead of class selectors.
For example,
.child1, .child2, .child3 {
background-color: red;
background-color: blue;
background-color: yellow;
}
is treated as
.child1, .child2, .child3 {
background-color: yellow;
}
which applies a yellow background to all three children, both despite and because of the fact that all three children are listed. The same holds true with .parent > :nth-child(1), .parent > :nth-child(2), .parent > :nth-child(3) as the selector.
Therefore, if you want to style three elements differently, you will need three rules, one for each element:
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
.child3 {
background-color: yellow;
}
Again, this is true regardless of what selector you use to actually reach each child element. The point is that each set of style declarations (property: value pairs) needs to appear in its own set of selector {} rules.
Why do you want to use nth selector if your child elements use different classes? Nth-selector should be used for elements that haven't got class selector or where the content is dynamic. In this particular case you don't need nth selector, just use
.parent .child1 {
background-color: #d3d3d3;
}
.parent .child2 {
background-color: #000;
}
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
here is a fiddle with the problem:
https://jsfiddle.net/c2exs2f7/3/
How does the second "blue" stay like the first instance (it should have color: white) without changing the HTML structure?
HTML
<div class="blue">
<div class="content">
<div class="label">blue</div>
<div class="yellow">
<div class="content">
<div class="label">yellow</div>
<div class="blue">
<div class="content">
<div class="label">blue</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS
// Skip until...
div {
border-radius: .25em;
padding: .5em;
font-family: helvetica, sans-serif;
}
// ...here:
.blue {
background-color: hsl(220,100%,50%);
.content {
color: white;
}
}
.yellow {
background-color: hsl(60,100%,50%);
.content {
color: hsl(0,0%,10%);
}
}
EDIT #1
Thank you guys for these fast responses!
I am working on a grid system where I am able to nest different grid systems (with different CSS values).
The selectors .yellow .content and .blue .content have the same specificity (20 in this case), therefore the selector that appears later in the stylesheet will override the first one due to the cascading nature of a stylesheet. In this case, the selector .yellow .content is overriding .blue .content, which is why the nested .blue element is black.
One quick solution would be to select nested .blue element with the selector .blue .blue:
Updated Example
.blue,
.blue .blue {
background-color: hsl(220,100%,50%);
.content {
color: white;
}
}
An arguably better approach would be to only select direct .content children elements using the child selector, >:
Updated Example
.blue {
background-color: hsl(220,100%,50%);
> .content {
color: white;
}
}
.yellow {
background-color: hsl(60,100%,50%);
> .content {
color: hsl(0,0%,10%);
}
}
Based on your comments, the ordering/layering of the elements may vary. An alternative solution would be to set the color property on the .blue/.yellow element and then set the color property of the children elements to inherit:
Updated Example - this seems to work for all variants.
.blue {
background-color: hsl(220,100%,50%);
color: white;
.content {
color: inherit;
}
}
.yellow {
background-color: hsl(60,100%,50%);
color: hsl(0,0%,10%);
.content {
color: inherit;
}
}
See https://jsfiddle.net/c2exs2f7/4/
What I did was to enforce inheritance only for the child content classed DIV, not the entire descendance.
Applying the immediate children operator > in the SCSS makes the .content div to consider only its immediate parent color.
Go on and try nesting more DIVs, you will see that it works.
You can't. Not with inherent anyway. Because the second blue will inherent from the yellow. So if u want all blue always have white letters and yellow always black letters. Why not just put:
.blue { color: #fff; }
.yellow { color: hsl(0,0%,10%); }
And you won't need the ".content" wrapper.
I had this same issue where the HTML nesting varies and so it's not possible to make more specific selectors due to overwhelming complexity and non-DRY code.
Here's the solution I came to:
https://jsfiddle.net/cg0u8v1s/
Basically, a systematic approach to the class names is key so you can use a CSS attribute selector reliably (although I'd recommend a more unique naming convention than "color-" as it's too generic.).
Example:
.color-blue {
&,
[class*="color-"] &,
[class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
background-color: blue;
.content {
color: skyblue;
}
}
}
.color-yellow {
&,
[class*="color-"] &,
[class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
background-color: yellow;
.content {
color: brown;
}
}
}
This will output selectors that become more specific with nesting without the need for non-DRY code or having to use !important.
The CSS output will look like this:
.color-blue,
[class*="color-"] .color-blue,
[class*="color-"] [class*="color-"] .color-blue {
// code...
}
i got this:
<div id="father">
<span class="child1"><span>
<div class="child2"><div>
</div>
i need to change text color of child2 on father:hover, and i was able to do that,
but when i hover on child1, child2 loose color and is displayed normally, how can i set hover on child1 so do not loose hover effect ?
i've already tried with and it doesn't work
.child1:hover .child2{ color: #eed847; }
thanks
.child1 is not a parent of .child2 in your example, which is expected by your use of space in the selector.
The following selector should work, when any of .child1 or .child2 is hovered.
#father:hover .child2 { ... }
Demo
If you don't want the text color of the second child to change you could use a workaround like this:
#father:hover .child2 {color: #eed847;}
.child2:hover {color: #000!important;}
In this example the text of child2 will stay black when you only hover over child2.
You could use a sibling selector in your CSS, Chris Coyier has written a fair bit about them here.
.child1:hover + .child2 { #some css };
The closing tags of HTML were invalid. I modifed your HTML and added css for your needed behaviour.
HTML
<div id="father"> <span class="child1">child1</span>
<div class="child2">child2</div>
</div>
CSS
#father {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.child1 {
background-color: green;
}
.child2, #father span.child1:hover + div.child2 {
background-color: blue;
}
#father:hover .child2 {
background-color: red;
}
Working Fiddle
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below:
.foo {
margin-right: 10px;
}
.bar {
margin-right: 0px;
}
Which class will have specificity? Will the margin be 10px or 0px?
It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.
CASE 1
.foo { background : red; }
.bar { background : blue; }
class = 'foo bar' would be blue in this instance.
CASE 2
.bar { background : blue; }
.foo { background : red; }
class = 'foo bar' would be red in this instance.
Working Example
Also, if you wish to target the element who has only both classes, you can use this syntax:
<ul>
<li class="foo first">Something</li>
<li class="foo">Somthing else</li>
<li class="foo">Something more</li>
</ul>
.foo {
color: red;
}
.foo.first {
color: blue
}
A single class name carries the same weight. In such a scenario, the rule that is listed first will be overwritten by the second, and hence, the element will have margin-right: 0px;
Here is a simple example using color instead of margin, because it's easier to visualize. The value specified in bar will be chosen by the browser.
In addition, more "specific" class will override a more generic one:
HTML:
<div class="foo">
<div class="bar">Hello World!</div>
</div>
With the following CSS:
.foo .bar { margin-left:25px }
.bar { margin-left:0px }
Notice how the inner div still has 25px margin to the left?
Also, read up on "!important" argument after providing the value:
.bar { margin-left:0px!important }
Check out