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
Related
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
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;
}
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...
}
What I mean to say with this is, if I have a page with two divs, and I want each div to have a separate style, what way would I go about this?
Example:
div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.
I realize it would be possible to just add a class to each div, but what if I expand it? What if I want a whole section of my page with a lot of different attributes to use one part of the stylesheet, and another whole section to use another part?
You can simply prefix the CSS rules with the ID or class of the section. For example:
#section1 h1 {
color: red;
}
#section2 h1 {
color: blue;
}
and basically prefix every rule with either #section1 or #section2 depending on the containing section.
As far as I understand it you want for example every div in your header to be green while every div in your footer is supposed to be red.
#header div{ background-color: green; }
And than
<div id="header">
<div>I'm green</div>
</div>
You can also use more complex selectors to helpt you solve special cases, take this example:
#header div{ background-color: red; }
#header > div{ background-color: green; }
And than
<div id="header">
<div>
I'm green...
<div>...and I'm red</div>
</div>
</div>
Microsoft has a great overview of what selectors are available. There examples are sometimes a little weak but its something.
You can do this:
.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div.
.secondSectionType span {color: red; }
Then if your HTML looks like this:
<div class="firstSectionType">
<p><span>Hello</span></p>
<div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
<p><span>Hello</span></p>
<div>This has a blue background and <span>this is red text</span></div>
</div>
the divs and spans in the corresponding secions will be formatted accordingly.
The CSS above requires you to repeat .firstSectionType or .secondSectionType in each rule, but a CSS preprocessor like LESS will allow you to rewrite it like:
.firstSectionType
{
div{ background: red;} // apply this style to one div.
span { color: blue; }
}
.secondSectionType
{
div{ background: blue;} //apply this style to another div.
span {color: red; }
}
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>