This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Closed 5 years ago.
i Have used bootstrap and css , here is my code
<div class = "row" id="parent"=>
<div class="col-md-8" id="ClildDiv1">
//Some Content
</div>
<div class="col-md-4" id="ChildDiv2" style="display:none">
//Some Content
<div>
</div>
Now i want on hover on
<div class="row Parent>
All its Child should be visible in this case
<div class="col-md-4 ChildDiv2">
Any Help Would Be Appreciated And i want to achieve that only by CSS styling
You want one of the sibling selectors. General sibling ~ or next sibling +
.ClildDiv1:hover ~ .ChildDiv2 {
display: block;
}
See fiddle here
Or, the parent hover for any child div would be
.Parent:hover > div {
display: block;
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
Good day all,
I have an a tag with class "WORKSHEET_block" and which is contained in 3 other div.
The css to style is (which does not work):
.WORKSHEET_block < .fc-daygrid-event-harness < .fc-daygrid-day-events < .fc-daygrid-day-frame {
background-color: green !important;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">My Value</a>
</div>
</div>
</div>
I know if it was the other way around from parent to child we would use ">" from the parent to the child.
Is there anywhere I can select the parent from the child?
.fc-daygrid-day-frame:has(.WORKSHEET_block) {
background-color: green;
}
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a class="WORKSHEET_block">This is the child using the class</a>
</div>
</div>
</div>
<div class="fc-daygrid-day-frame">
<div class="fc-daygrid-day-events">
<div class="fc-daygrid-event-harness">
<a>this child does not have any class</a>
</div>
</div>
</div>
Using :has relative selector. I have inserted an extra HTML code it doesn't have a WORKSHEET_block class, so the style is not applying to it
This question already has answers here:
Why can't child elements override the opacity of parent with a greater value?
(1 answer)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 2 years ago.
I'm stuck with a very, very basic problem. Searched a bit, but couldn't find any answer. These are my nested classes. in .css file. Here's the code:
.x{
color: blue;
}
.y{
color: red;
}
.x:hover{
opacity: 0.1;
}
.y:hover{
opacity: 1;
}
<div class= "x">
<div class = "y">
<p>ABC</p>
</div>
</div>
At color property color of ABC is red so child overrides parent. But when it comes to hovering, opacity is 0.1 as parent overrides child. What's going under this behavior? I know it's basic, so any help would be appreciated.
stackblitz: https://stackblitz.com/edit/angular-ivy-srdbcw?file=src/app/app.module.ts
It's because opacity works for whole element of x. So if you have multiple nested elements, then it's opacity is added up. Means x set opacity for itself, then y sets opacity to itself and so on, it's not inherited by child elements:
span {
background-color: red;
}
div {
opacity: 0.9;
}
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<span>SPAN TEXT with 8 parents</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<span>SPAN TEXT with 1 parent</span>
</div>
Same works for any other attributes, that acts on only current element: margin, padding, display, border, etc.
This question already has answers here:
What CSS selector can be used to select the first div within another div
(4 answers)
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 2 years ago.
Hi can you please help with some css,
I have this code
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
<div>
<div>
<input class="test"/>
</div>
</div>
I want to change some properties only in my first input, can somebody help me solve this ?
Thanks
In your case, you can use these css rules:
div:nth-child(1) div input.test {
color: green;
}
or
div:first-of-type div input.test {
color: green;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 5 years ago.
I have question about CSS selectors. I have below structure - I can only modiffy CSS - I don't have access to modify html or JS.
<div class="wrapper">
<div>
<div>
<div class="open">
</div>
</div>
</div>
<div>
<div class="top">
</div>
</div>
</div>
Class open will be toggled. Can I make selector when:
div in 4 line has open - div with class top => .top {top:50px}
div in 4 line not has open - div with class top => .top{top:0px;}
This is possible?
Try this:
.wrapper div:not(.open){
...
}
You will need to adjust it to the get the correct DIV, because this will affect all of them inside .wrapper
In your case it looks like you need something like:
.wrapper > div > div > div:not(...){...}
However, that is a bad practice.
You can read some more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
<div> /*i want to select */
<div>
<div class="ui-message-error">
</>
</div>
</div>
I have a page something like that and i can not appoint class parent divs. So how can i select parent div if child of child of that div has 'ui-message-error' class.
I beleive that in CSS that is not possible, you can either do it the other way around and select the child of 'ui-message-error' or do it with javascript.
If it's a direct child of a parent (for example the body) you could use body > div { }
If the div has a specific preceding element, for example:
<div id="specificDiv"> bla </div>
<div>
<div>
<div class="ui-message-error">
</>
</div>
</div>
You could use #specificDiv + div { }.
If you are looking for a way to select the div based on the class of the child, you'll need a Javascript solution
Using jQuery you can do like this:
jQuery(document).ready(function(){
jQuery('.ui-message-error').parent().parent().css('display','none');
});
You cant do it with CSS, but if you use jQuery it is possibele like this:
$(".ui-message-error").parent().parent().addClass('myparent');
DEMO : http://jsfiddle.net/fcrDX/
Your code could go like this:
HTML:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div> /*i want to select */
<div>
<div class="ui-message-error">
</div>
</div>
</div>
<script language="javascript">
$(function() {
$(".ui-message-error").parent().parent().addClass('myparent');
});
</script>
CSS:
.myparent{
border:1px red solid;
}