Adjacent CSS ~ selector on a pseudoclass ::before [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 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>

Related

How to make changes to the sibling element if child of an element is focused? [duplicate]

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 */}

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.

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

Hovering effect doesn't work with <img> tag [duplicate]

This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
How to affect other elements when one element is hovered
(9 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 4 years ago.
i don't why the following code doesn't work with images but it does with other tags
// HTML
<img src="https://via.placeholder.com/80x80" alt="image">
<div>lorem ipsum</div>
// CSS
img:hover div {
color: red;
}
Anyone can explain why it's not working and how i can fix it
Thanks
Use +
It is Adjacent sibling combinator. It combines two sequences of simple
selectors having the same parent and the second one must come
IMMEDIATELY after the first.
Learn here:https://techbrij.com/css-selector-adjacent-child-sibling
img:hover+div {
color: red;
}
<img src="https://via.placeholder.com/80x80" alt="image">
<div>lorem ipsum</div>

Display div only if another element has a class [duplicate]

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.