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.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I want to change colour of css.seperator when css.searchBarInput is in focus, how can I do this?
Here's my HTML for reference:
<div className={css.searchBarBase}>
<div className={css.searchBarFirstDiv}>
<label className={css.searchBarDivContent} htmlFor="location-search-input">
<div className={css.searchBarHeadingFont}>Location</div>
<input
id="location-search-input"
className={css.searchBarInput}
/>
</label>
</div>
<div className={css.seperator}/>
</div>
Here's my attempt at it:
.searchBarBase > div:focus-within + div {
opacity: 0;
}
If there is only one focusable element inside searchBarBase then you can look at focus-within.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
selector to use for you would be .searchBarFirstDiv:focus-within ~.seperator {/* style to apply here */}
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>
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 2 years ago.
I should say on the outset that I am not familiar with Javascript, so a solution involving HTML or CSS if possible would be really helpful!
The site I am building uses something very similar to the hover-to-show effect shown here.
It works just fine, until there comes a situation where I need to separate the two divs further by another div;
i.e.; going from this:
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
to this:
<div>
<div class="myDIV">Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
That's not possible with just CSS unless you can apply the CSS to the newly created parent
.hide {
display: none;
}
.newlycreatedparent:hover+div.hide {
display: inline-block;
}
<div class="newlycreatedparent">
<div>Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
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 want to target a pseudoclass (::before) using an adjacent sibling selector with CSS. The node-bullet:before needs to be targeted using has-color as a reference.
Below is code, I wrote the pseudoclasses ::before and ::after to mimic what I see when I inspect html/css on the code I'm working with.
.Node-bullet:before + .has-color {
background-color: green;
}
<div class="foo1">
<div class="Node-bullet">
::before
<p> Pseudoclass ::before needs to be targeted </p>
::after
</div>
<div class="has-color">
<p> Use .has-color class to target ::before class </p>
</div>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I want to display the toggle_embed class only if the a element has has-embed class. Is there any way I can solve this using CSS?
<div class="comment HAS_EMBEDDED">
<div class="toggle_embed">Embedded content</div>
<a class="has-embed">#name</a>
<a>Text</a>
</div>
NO. There's no previous selector in css. So, you can't do this just with css, you may use jQuery for this.
But if you want to use pure css solution then what about changing the markup like below?
<div class="comment HAS_EMBEDDED">
<a class="has-embed">#name</a>
<div class="toggle_embed">Embedded content</div>
<a>Text</a>
</div>
Then you can use css like this:
.toggle_embed{
display: none;
}
.has-embed + .toggle_embed{
display: block;
}
Note: Changing the markup, you may have to re-work for your layout.