Styling a specific child element by hovering a parent div - css

Although it can be done using javascript or any client side scripting,whether is it possible to hover only a specific child element while hovering the parent element in CSS?
<style>
.p{//some style...}
.p:hover{//change style of child having class c2}
</style>
<div class="p">
<span class="c1"></span>
<span class="c2"></span>
</div>

You just need to pass .c2 after your :hover selector:
.p:hover .c2{//change style of child having class c2}
EDIT
If you want to hover only child you need to add :hover to child element instead of parent:
.p .c2:hover{//change style of child having class c2}

Related

Is it possible to remove a style based on the state of a sibling div's button?

I have an html snippet that will hide a button when clicked:
<div class="item">
Some Text
</div>
<div>
<button onclick="hideButton()">
Hide me
</button>
</div>
CSS:
.item {
background-image: linear-gradient(180deg,black,white);
}
Using CSS, is it possible to remove the background-image style on div.item if the button nested in the sibling div is in the hidden state? I know how this can be done in JavaScript, but curious if this can be handled solely with CSS?
This is possible using the newly added CSS has selector: div:has(> button:active) ~ .item This is not widely supported at the moment, so JavaScript might be what you need here.

Changing style for class inside shadow root

I want to adjust the style for an element inside shadow root. The problem is, that I need to target the class.
HTML inside DOM
<menu-flyout-item>
#shadow-root
<div class="menu-flyout-item" part="base">...</div>
</menu-flyout-item>
Style for the class menu-flyout-item inside HTML DOM
.menu-flyout-item {
padding: 0 10px;
}
Targeting scale-menu-flyout-item > div::part(base) as well as scale-menu-flyout-item > .menu-flyout-item won´t change the padding.
Do you have any advice how to target the class inside shadow div element?

how to calculate child property based on parent property in sass

here is the simple html sample:
<div class='parent'>
parent div
<div class='myDiv'>
child div
</div>
</div>
I want change child div style based on parent property style. I do not want to use #media for child. But e.g. once parent changes its background color to something specific then I want change child background color, e.g. change child background only if parent changed to RED. Is that possible?
Yes, but neither with CSS or Sass, since Sass is based on CSS and the latter does not support conditional statements (yet). You will have to use Javascript instead.
You can however apply a certain styling to a descendent if a certain selector matches the parent.
// HTML
<div class="red">
Parent
<div>
Child
</div>
</div>
// SCSS
.red {
background-color: red;
> div {
color: green;
}
}
https://codepen.io/LudwigGeorgImmanuel/pen/abmPJmZ

CSS Selector: element which has a class and any parent does not have another class

I have the following simplified structure:
<div class="ion-page ion-page-hidden">
<div class="generated-plan />
</div>
<div class="ion-page">
<div class="generated-plan />
</div>
I need a CSS selector which selects elements with class "generated-plan" which are not a child of an element which has the class "ion-page-hidden". My expectation is that it matches only the second div.
In my real code there are more elements between the ion-page div and the generated-plan div. Also there may be multiple elements with ion-page-hidden class, if this is relevent for the answer.
Background: I'm trying to get reactour to work with Ionic react. Ionic keeps loaded components hidden. Reactour highligts the first element which matches the selector, which may one of the hidden ones. I can't change the properties of the outer div, this is Ionic magic, the inner div is a custom component.
I am guessing (so please check) that you are looking for these conditions:
the parent element must have the .ion-page class
the parent element must NOT have the .ion-page-hidden class
the child element has the class .generated-plan
The first condition is met by using the class selector .ion-page. The second condition is met by using the not selector with the class selector :not(.ion-page-hidden).
However, both conditions apply on this element. So what you need to do is set them after each other without any space between them .ion-page:not(.ion-page-hidden).
For the third condition you can use the descendant selector (space) with class selector
All together:
div {
border: 1px solid black;
padding: 1em;
margin: 1em;
}
.ion-page:not(.ion-page-hidden) .generated-plan {
background: yellow;
}
<div class="ion-page ion-page-hidden">
.ion-page div
<div class="generated-plan">one</div>
</div>
<div class="ion-page">
.ion-page div
<div class="generated-plan">two</div>
</div>

selector to match elements not nested within another selector?

I have a bunch of divs which I nest arbitrarily:
<div>
<div>
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
I make their contents pink with a rule like this:
div { color: pink; }
I want to be able to add the special class to any of those divs to cancel out the pink rule for it and all of its children. For example, if I add the special class to this div,
<div>
<div class="special">
<div>Apple</div>
<div>
<div>Banana</div>
<div>Grape</div>
</div>
</div>
<div>Craisin</div>
</div>
then "Apple," "Banana," and "Grape" should no longer be pink.
Can I tweak my rule to only match divs that aren't nested inside a .special?
I'm not looking for a solution involves writing a rule for .special that cancels out every style defined on div. For example, this is not a good solution even though it works:
.special, .special div { color: black !important; }
My actual styles are more complicated than just changing the color, and there are other rules with selectors like div span which I would also like to disable with the special class.
You cannot prevent children/descendants from inheriting inheritable style properties using CSS.
The style properties for the descendants have to explictly be reset.

Resources