im trying to change the background a siblings div while hovering on the child that exist inside the parent
<div class="parent-container">
<div class="child-container-upper">
</div>
<div class="child-container-bottom">
</div>
</div>
im able to change the background of my bottom-container > upper-container
.child-container-upper {
&:hover {
~.child-container-bottom{background:purple}
}
}
I want while hovering on the bottom-container to effect to upper but it dosent seem to work.
Suggestions?
In the very simple case that you describe then it can be done by sensing when the parent is hovered on and the relevant child is not.
This snippet uses the CSS :not pseudo class to achieve this.
.parent-container:hover .child-container-upper:not(:hover) {
background: red;
}
.parent-container:hover .child-container-bottom:not(:hover) {
background: green;
}
<div class="parent-container">
<div class="child-container-upper">upper
</div>
<div class="child-container-bottom">bottom
</div>
</div>
Related
I have a div with the class .box-container which can contain several div of class .legend-panel, I want to apply some style only to the first child which is not hidden in the box-container.
I'm new on scss so I arrived to target the first child but not more.
.legend-panel:first-child{
bottom: 2.5em;
}
thanks for helping.
You can achieve what you want with a mixture of nots and sibling selectors. The following assumes that you are using a hidden class to hide your elements
.hidden {
display:none;
}
.legend-panel:not(.hidden):first-child, /* this styles the first visible if it is the first child */
.legend-panel.hidden + .legend-panel:not(.hidden) { /* this will style thie first show following a hidden panel */
color:red;
}
.legend-panel:not(.hidden):first-child ~ .legend-panel,
.legend-panel.hidden + .legend-panel:not(.hidden) ~ .legend-panel { /* these will reset all following visible back to original */
color: initial;
}
<div class="box-container">
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - first
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - not styled
</div>
</div>
<div class="box-container">
<div class="legend-panel">
show - first
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel hidden">
hide
</div>
<div class="legend-panel">
show - not styled
</div>
<div class="legend-panel hidden">
hide
</div>
</div>
EDIT
As #Pete pointed out, the :first-of-type pseudo selector only takes into account the type of element (e.g. div or li), it does not work with classes, so this answer is wrong.
You will have to specifically target the first div that is not hidden. I'm going to assume you hide the div's by adding a class hidden to them.
Using the :not pseudo selector, you can ignore elements, you can use this to ignore all .legend-panel elements that have the class hidden, then you can use the :first-of-type pseudo selector to only select the first of the non-hidden .legend-panel elements. That should be all!
This should be a working approach:
.box-container{
.legend-panel{
// Make all panels blue
background-color: blue;
&:not(.hidden){
&:first-of-type{
background-color: red; // This should be the one
}
}
}
// Or in 1 selector
//.legend-panel:not(.hidden):first-of-type{
// background-color: red;
//}
}
I'm trying to target an <h1> element within a <div> using the CSS first-of-type property, but I noticed that not only does this target the first child of this <div> that is of type <h1>, but it also targets the children of children that are of type <h1>, which seems less useful to me. Is there any way that children of children can be excluded from this?
In the example below, I have an <h1> that's an immediate child of a <div> called #everything. I try targeting that <h1> in the CSS, but this results in targeting both the correct <h1> as well as another <h1> within a child <div>.
#everything h1:first-of-type{
color: red;
}
<div id="everything">
<h1>hello</h1>
<div id="something">
<h1>goodbye</h1>
</div>
</div>
Is this what you wanted?
#everything>h1:first-of-type{
color: red;
}
<div id="everything">
<h1>hello</h1>
<div id="something">
<h1>goodbye</h1>
</div>
</div>
Update your css code with this.
#everything > h1{
color: red;
}
One more option:
#everything:first-child > h1 {
color: red;
}
For this option #everything:first-child you need to specify the child h1 or it's class/id.
My code can add divs as child or sibling, I've created two classes and two :hover for each class but when I put the mouse on a child the parent hover is activated as well.
.Group {
background-color: white;
}
.Group2 {
background-color: white;
}
.Group:hover {
background-color: yellow;
}
.Group2:hover {
background-color: red;
}
<div class="Group">
root
<div class="Group">1st child
<div class="Group2">2nd child
<div class="Group">3rd child</div>
</div>
</div>
<div class="Group">1st child</div>
</div>
If you hover over a child element, you're also hovering over the parent, there's no way around that.
What you could do is set a different or additional class on the 1st child elements that don't have further children.
Highlighting background colors in nested blocks when hovering
If you are trying to activate the background colors of the nested div blocks, I think you might be looking for the following.
For the HTML, use distinct class names to identify each layer of nested div blocks:
<div class="Group">root
<div class="Group1">1st child
<div class="Group2">2nd child
<div class="Group3">3rd child</div>
</div>
</div>
<div class="Group1">1st child</div>
</div>
and the CSS:
.Group, .Group1, .Group2, .Group3 {
background-color:transparent;
}
.Group:hover {
background-color:yellow;
}
.Group1:hover {
background-color:pink;
}
.Group2:hover {
background-color:red;
}
.Group3:hover {
background-color:orange;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/Scr9G/
As you mouse over each nested div successively, the background color changes in sequence.
If you are trying to target a nested element with :hover without the effect bubbling up through the parent/ancestor blocks, you will need to use JavaScript/jQuery to create the selection rules that you need.
Quirky Hack Using <p> Tags
The following construction exhibits the behavior that the OP would like to see:
<p class="Group">root
<p class="Group">1st child
<p class="Group2">2nd child
<p class="Group">3rd child</p>
</p>
</p>
<p class="Group">1st child</p>
</p>
and the CSS is as before:
.Group {
background-color:white;
}
.Group2 {
background-color:white;
}
.Group:hover {
background-color:yellow;
}
.Group2:hover {
background-color:red;
}
Second demo fiddle: http://jsfiddle.net/audetwebdesign/cf2mn/
In this case, the OP was trying to nest <p> tags, which actually do not work like nesting other block elements like <div>.
When using <p> tags, the closing </p> tag is optional if followed by other flow elements like p, div, ul and so on.
In this case, the HTML snippet show above is equivalent to:
<p class="Group">root</p>
<p class="Group">1st child</p>
<p class="Group2">2nd child</p>
<p class="Group">3rd child</p>
<p class="Group">1st child</p>
which means that all the p tabs are siblings and there are no parent-child relationships, which is why the CSS appears to be working as the OP desired.
If div tags had been used instead of p tags, the resulting DOM would have exhibited the parent-child relationships and the CSS would have shown the original behavior that the OP did not want.
Using the p tags may give the desired effect for the CSS, but it works only because the DOM elements are siblings instead of parent-child. (In addition, the nested p tags will not validate.)
It is worth noting that:
CSS 2.1 does not define if the parent of an element that is ':active' or ':hover' is also in that state.
so it is better not to rely on the state of the parent element when apply a pseudo-element on a child element.
References:
About :hover: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
About optional closing of p tag: http://www.w3.org/TR/html-markup/p.html#p
There's no way to prevent parent elements to get background color.. rather use this code
<div class="root">
Main Root
<div class="group">
First One
</div>
<div class="group2">
Second One
</div>
<div class="group">
Third One
</div>
.group:hover {
background: yellow;
}
.group2:hover {
background: red;
}
SEE THE DEMO HERE
Give separate ids to the divs and when a child div is hovered over, change its background image color and remove the background color of the parent all at the same time. I guess that is the only way around this
The simplest and best way is probably to use any other element, li for instance.
css:
.Group, .Group2, .Group3
{
background:white;
display: block;
list-style: none;
}
.parent
{
margin: 0;
display: block;
padding: 0;
}
.Group:hover
{
background: yellow;
}
.Group2:hover
{
background: red;
}
.Group3:hover
{
background: yellow;
}
html:
<ul class="parent" >
<li class="Group" >root
<li class="Group">1st child
<li class="Group2">2nd child
<li class="Group3">3rd child</li>
</li >
</li >
<li class="Group">1st child</li >
</li>
</ul>
You should add sub-element for content and use element+element pseudo selector.
.group-content:hover {
background-color: yellow;
}
.group-content:hover + .group {
background-color: red;
}
<div class="group">
<div class="group-content">1st child</div>
<div class="group">
<div class="group-content">2nd child</div>
<div class="group">
<div class="group-content">3nd child</div>
</div>
</div>
</div>
<div class="group">
<div class="group-content">1st child</div>
</div>
Okay so I have an image,
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan">This is what should appear when hovering over first image</span>
</div>
Now, how do I make it so that "firstspan" only shows up when someone hovers over the "first" image? Here is what I tried for the css.
#firstspan {
display: none;
}
#first:hover #firstspan {
display: block;
}
but this doesn't seem to work. Any idea on what is wrong?
Also, is there a way for #first to be positioned inside the image on the bottom? Rather than outside the image?
Try this
img#first:hover ~ #firstspan {
display: block;
}
DEMO.
.column:hover #firstspan {
display: block;}
Demo
Your solution doesn't work because your image tag and span tag are siblings. Your rule is looking for a parent to descendant relationship.
If you can wrap your image tag and span tag in a DIV and move the id for the image tag to this new container DIV your CSS should work.
<div id="first">
<img>
<span id="firstspan"></span>
</div>
Try like this:
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan"> your text </span>
</div>
#firstspan {
display: none;
}
.column:hover #firstspan{
display: inline;
}
We have a DOM like this:
<div class="outer">
<div class="inner"> <!--// No "copyright" in this node //-->
<div class="content">...</div>
</div>
<div class="inner">
<div class="content">...</div>
<div class="copyright">...</div> <!--// DISPLAY THIS ONE //-->
</div>
<div class="inner">
<div class="content">...</div>
<div class="content">...</div>
<div class="content">...</div>
<div class="copyright">...</div> <!--// Hide this one //-->
</div>
<div class="inner">
<div class="content">...</div>
<div class="content">...</div>
<div class="copyright">...</div> <!--// Hide this one too, etc. //-->
</div>
<!--// etc. //-->
</div>
All elements with class "copyright" must be hidden, with exception of the very first one.
We tried to apply this approach, but unfortunately with no success. It must be a CSS only solution. Any idea?
Thanks for your help!
In this case, each .copyright is the first and only one of its kind in .inner, so you need to select by .inner instead. If you don't need to apply any special rules to the first child, you don't need to use the approach I describe in that other question; simply use this to hide the other elements:
.inner ~ .inner .copyright {
display: none;
}
This is still the top answer on Google for "css select first occurrence of class" so adding the simple technique I found to work.
This solution doesn't specifically solve the OP but does allow you to select the first element with a class amongst siblings.
You can use a combination of the sibling and not selectors as shown in this JSFiddle
For example:
.my-class:not(.my-class ~ .my-class) {
background: red;
}
How does this work?
The sibling selector (~) selects elements which are somewhere after other elements.
So this would select every element except the first one:
.my-class ~ .my-class {
background: red;
}
We then just use the :not selector to reverse this, i.e. select only the first element.
I have only tested this on Chrome but think it should work on most modern browsers.
Try this one JSfiddle
div.inner > .copyright { display:none; }
div.inner:first-child .copyright { display:block; background:#000; }