CODEWITHSUNDEEP
htmlcsscss-selectors
feri baco
feri baco

Reputation: 635

css selector inside another element

I have two types of color inside custom button, where 1st is defined by class of button, and second is defined by class of span inside that button, how can I change both of these colors when button is acive?

CSS:

.buttonClass{
  color:black;
}
.buttonClass:active{
  color:white;
}
.spanClass{
  color:grey;
}
.spanClass:active{ //working only when I click on span, but not for whole button
  color:red;
}

HTML:

<button class="buttonClass">
  <span class="spanClass">
    black/white text
  </span>
  grey/red text
</button>

Upvotes: 2

Views: 106

Answers (3)

Disgeae
Disgeae

Reputation: 80

You'll need a additional class for the grey/red text to realize this.

EDIT:

.buttonClass:active > .spanClass{
 color:red;
}

Upvotes: 0

edd
edd

Reputation: 1364

Try this

.buttonClass:active .spanClass{
  color:red;
}

Upvotes: 4

johnkavanagh
johnkavanagh

Reputation: 4674

A few things:

  • Would be great to see a code example of what you're trying to achieve. I've dropped your code into JFiddle here: http://jsfiddle.net/ncAkG/ but it's not clear what you're trying to achieve.
  • The :active pseudo class isn't necessarily going to be the best approach on the span since it's not standard on spans.

However, having taken a look, your best bet if you're trying to change the span's appearance based on the active state of the button would be to inherit the new colour from the active state of the parent, like this:

.buttonClass:active .spanClass{
  color:red;
}

What this means is that when '.buttonClass' is active, the child element '.spanClass' should be red.

Here's the updated Fiddle: http://jsfiddle.net/ncAkG/1/

Is this what you were hoping to achieve?

To expand on this a little further, you can do the same thing based on other events on the parent, like hover:

.buttonClass:hover .spanClass{
  color:green;
}

See the Fiddle here: http://jsfiddle.net/ncAkG/2/

You'll now see that the span turns green when you hover over the button, and red when the button is clicked (and becomes active).

Upvotes: 3

Related Questions