This question already has answers here:
Is there a CSS parent selector?
(33 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I want to select a non-descendant element with css on hover. To be more precise, when I hover on the image with id="tapas", I want to change the visibility of the text with id="cuerpo".
<div id="tapa">
<div class="imgagenes">
<img src="img/tapas.jpg" id="tapas">
<img src="img/tapitas.jpg" id="tapitas">
</div>
<div class="text">
<p id="cuerpo">
There is text here
</p>
</div>
</div>
Some time before I had the text in the same div, with id="imgagenes", but I don't want that right now. Therefore, I had this command on css:
#tapas:hover ~ p {
visibility: visible;
}
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 months ago.
document.querySelectorAll('h4:first-of-type') return multiple divs
when we have the DOM:
div
h4
div
h4
How to select only the first h4? ( Without specifying the div like div:first-of-type h4:first-of-type )
querySelector instead an it will do the job
https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector
const firstHeading4 = document.querySelector('h4:first-of-type')
console.log(firstHeading4)
<div>
<h4>Heading 1</h4>
</div>
<div>
<h4>Heading 2</h4>
</div>
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 2 years ago.
I need to add a selector in css to bold the paragraph adjacent to the goals_container id.
Html code looks like:
<body>
<main>
<div id="goals_container">
</div>
<p> This is what I want to access </p>
</main>
</body>
You need the + (adjacent sibling) selector:
#goals_container + p {
background: tomato;
}
<body>
<main>
<div id="goals_container">
</div>
<p> This is what I want to access </p>
</main>
</body>
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:
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;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I would like to know how to style an element according to his son.
.content p {
text-indent: 20;
}
<div class="content">
<p>1</p>
<p>2</p>
<p>
<iframe></iframe>
</p>
<!--I have to modify this paragraph-->
<p>4</p>
</div>
What do I need to do, is to modify the paragraph that has the iframe (text-indent: 0).
The best is to write something like
<p class="custom">...</p>
Then add style with
p.custom{
/* Your styles here */
}