How to apply style to child of element with active state

Stark

I have a button, when clicking on that button i make its background a colour via the :active selector. The button has children, 2 divs. The first of those divs, i want its font color to change to white when the button's active state triggers. Ive tried combining active with the child selector but cant seem to get this working, is it possible?

Here's a sample in codepen

https://codepen.io/starkbotha/pen/ExLYNWJ

.my-button {
  width: 108px;
  height: 108px;
  border: 1px solid #000;
  padding: 17px;
  border-radius: 10px;
  background-color: transparent;
  transition-duration: 0.3s;
  text-align: left;
  cursor: pointer;
}
  
.my-button:hover {
  background-color: #ffffff;
  border: 2px solid #21a086;
}
  
.my-button:active {
  background-color: #21a086;
  border: 2px solid #21a086;    
}

.my-button:active > button-value {
      color: white;
}
<button class="my-button">
  <div class="button-value">123</div>
  <div>My Title</div?
</button>

Omar Zaoujal

You forgot "." after calling your div class in css

.my-button {
  width: 108px;
  height: 108px;
  border: 1px solid #000;
  padding: 17px;
  border-radius: 10px;
  background-color: transparent;
  transition-duration: 0.3s;
  text-align: left;
  cursor: pointer;
}
  
.my-button:hover {
  background-color: #ffffff;
  border: 2px solid #21a086;
}
  
.my-button:active {
  background-color: #21a086;
  border: 2px solid #21a086;    
}

.my-button:active > .button-value {
      color: white;
}
<button class="my-button">
  <div class="button-value">123</div>
  <div>My Title</div?
</button>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to style the parent element when hovering a child element?

How to set the hover state equals the active state with li clearfix element using ui-sref-active="active"

Angular 2 - Apply conditional style to a directive's child HTML element

How to apply a style to a sibling element from another element

How to not apply [routerLink] on a child element?

how to make parent state active(i.e., add active class) when child is active

How to style a Child html element in typescript / angular

How To Apply Inline Style and className to Same Element

Apply a particular style to all child elements of a Xamarin.Forms element

getAttribute of element with the state (.active)

How to ignore child element active region when parent:active is enable?

How to conditionally apply style color to an active tab

CSS or SASS How to change style of ::after, ::before effects of parent element when child element is active

MakeStyles (Material UI) apply style to child element

Apply css style to child element of parent class

How can I apply a style to a parent of a specific child

Pseudo-Element state - How to append a style to the state of after/before?

How to inline style child DOM element React?

How to apply css style only for specific Vue component and its child?

How can I show the active state of a child by clicking it's parent?

How to apply style to multiple classes on hover of an element?

How to set css child element but not apply for inside element of child element?

How to apply CSS on child element when hover parent element?

Apply style on scrollable element

How to apply bootstrap style to inline <select> element

How to apply style on first child of multilevel recursive classes

How to style parent element based on his child

How to apply a style to the active link of a NavLink element using mui styled()?

Apply style to child that are under certain element