Is there any option to change other div element by hover? [duplicate] - html

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I want to change div element's color by other div element's hover. I've tried this, but it doesn't works. HTML:
<div class="test1">
<p></p>
</div>
<div class="test2">
<a>
<span></span>
</a>
</div>
and CSS:
p:hover ~ a
{
filter: hue-rotate(110deg);
}
a
{
color: #03e9f4;
}
For sure, it works with HTML like this...
<div class="test1">
<p></p>
<a>
<span></span>
</a>
</div>
but I want it in two other divs, is it possible?

The reason it works in the last example is that the hovered element and target element are siblings within the same div (and you are using the general sibling combinator "~")- the only way to achieve that is to have the hover pseudostate on the first div and use the same logic to target the second div and then into the second div to the a element via the descendant selector (" ").
There is no way in CSS alone to achieve the effect when you hover over the p - it has to be the parent element that is the sibling. You could easily do this with JS - but not with only CSS.
The following will change the color of the a element when you hover over the parent div of the p. I also added a little :after pseudo-element to demonstrate the hovering result better.
a {
color: #03e9f4;
}
.test1:hover ~ .test2 a {
filter: hue-rotate(110deg);
}
.test1:hover ~ .test2 a:after {
content: ' and my color changed because you hovered over the previous div'
}
<div class="test1">
<p>I am in the first div</p>
</div>
<div class="test2">
<a>
<span>I am in the second div</span>
</a>
</div>

Related

Using CSS '+' selector on siblings not working [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 2 years ago.
I'm making a pure CSS animated navbar using the checkbox as a hamburger menu toggler, changing various elements with :checked and the + selector, which I've gotten to work on grand-child elements, but not siblings, I haven't found an adequate solution on the web either. Here's my HTML code, obviously stripped down a little:
.toggler:checked+.menu {
width: 350px;
}
<div class="menu">
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>
<input type="checkbox" class="toggler">
<div class="hamburger">
I got it to work on children of the hamburger class, so I'm fairy confident its an issue with the selector
Just put the checkbox input above the ".menu" class div. Then it will work fine.
I just added some background and text to show the result.
Hope this will help you
.menu {
background-color: red;
}
.toggler:checked+.menu {
width: 350px;
}
<input type="checkbox" class="toggler">
<div class="menu">
abc
<div class="menu-background"></div>
<div class="menu-navigation"></div>
</div>
<div class="hamburger">
Try using ~ instead of + to see if it helps you
There are two sibling selectors in CSS:
+ selects the next sibling and
~ selects any following sibling
As of now, there is no previous sibling selector in CSS, so you're going to have to change the order of your elements or use JavaScript.

Is it possible with CSS to target a h1 but only if it's the very first item in a parent? [duplicate]

I need to select a particular element only if it occurs as the first child of a div. Is there a CSS selector that'll handle that case?
For example, I want to select this figure:
<div>
<figure></figure>
<p></p>
<p></p>
</div>
But I don't want to select this one:
<div>
<p></p>
<figure></figure>
<p></p>
</div>
I can't change the HTML, so I can't add a class. I know about the :first-child and :first-of-type selectors, but they don't fit this case by themselves. How can I select the first child only if it's a figure?
You could use CSS :first-child selector with descendant selector like this:
JSFiddle - DEMO
div figure:first-child {
color:red;
}
OR: with CSS > child selector (as suggested by #Alohci)
DEMO
div > figure:first-child {
color:red;
}
I don't see any issue with figure:first-child selector. It would select the <figure> element only if it is the first child of its parent.
While :first-child represents any element which is the first child in the children tree of the parent, the figure part would limit the selector to match an element only if it is a <figure>.
have you tried the following?
div figure {
color: green;
}
div figure:first-child {
color: blue;
}
figure:first-child will select all the figures that are first child of a parent.
Check this example at W3C.
Use div figure:first-child selector.
Here is example
<div>
<figure>test</figure>
<p>div 1 pgraph1</p>
<p>div 1 pgraph1</p>
</div>
<div>
<p>div 2 pgraph1</p>
<figure>test 2</figure>
<p>div 2 pgraph1</p>
</div>
CSS:
div figure:first-child{
border:1px solid red;
}
It will apply red border only to first child.
Please refer to fiddle for demo

How to target and style a div outside another div with CSS [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have a div which I want to target to change the background colour.
This div lives in one container (main) and the target div lives within another (footer)
So I want to use the div promo to target footer-inner like so:
Demo: https://jsfiddle.net/yeLpnu36/
<main>
<div class="promo">
<p>
stuff here
</p>
</div>
</main>
<footer class="my-footer">
<div class="footer-inner">
<p>
change background of this div from promo
</p>
</div>
</footer>
I have tried things like:
.promo > .footer-inner,
.promo + .footer-inner,
.promo ~ .footer-inner {
background: yellow !important;
}
But with no success.
Any ideas how I can change the background colour of footer-inner using promo?
Thanks

Select most top level element [duplicate]

This question already has answers here:
CSS selector for first element with class
(23 answers)
How to apply css to top level element only
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I have a html code :
<div class="body">
<p></p>
<div class="select">
<p class="p1"></p>
<div class="select"></div>
<p class="p2"></p>
</div>
</div>
I want to select div element with class select. There are two element of this type which I want the parent one. How can I do that? Pay attention that the above code is just an example and the code can become complex arbitrarily.
Two div elements with same class may not be direct child and parent of each other and I want to do this by css-selectors if possible.
Style the .select and then overwrite those styles in .select .select:
.select {
/* top level select element */
color: red;
}
.select .select {
/* reset styles in nested select element */
color: initial;
}
<div class="body">
<p>Text</p>
<div class="select">
<p class="p1">Top Level Select</p>
<div class="select">Nested Select</div>
<p class="p2">Top Level Select</p>
</div>
<div>
<p class="p1">Text</p>
<div class="select">Top Level Select</div>
<p class="p2">Text</p>
</div>
</div>

Select tag which meets a condition [duplicate]

This question already has an answer here:
Find tags using css selector but not their descendants
(1 answer)
Closed 7 years ago.
I'm quite new in css selectors and I'm trying to do this:
I have a html with multiple divs. I want to select the first div meeting some condition, let's say div[id*='ample'] and then, select all divs with the same condition, but not the first divs children.
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>
So the thing I want is to get the div whose id='example1' and id='example3'.
The best would be if for example the div with id='example3' doesn't have to be the first divs brother.
Do you know how to do that?
I was thinking about:
div = css_select("div[id*='ample')")
while True:
divs.append(div)
div = div + css_select("div[id*='ample')")
But it's probably worthless.
You have many ways to select elements in JavaScript, it's depends on the html.
Back to your question: you can do it by using the parent of those divs (the body for example)
NodeList.prototype.forEach = Array.prototype.forEach;
/* 'body > *[id*="ample"]' - you can replace the 'body' selector with other parent selector */
document.querySelectorAll('body > *[id*="ample"]').forEach(function(el) {
el.classList.add('red');
});
div {
height:10px;
border:1px solid #000;
}
.red {
border:1px solid red;
}
<div id="example1">
<div id="example2">
</div>
</div>
<div id="example3">
</div>