Check out my JSfiddle right here; Now as you click on the red square it fills up, but how can I make it fill up the green square when I click on the red square? It's like clicking on an element and making it activate on something else?

I want to be able to click on something and then something other needs to do something, and not the same element, without javascript, is that possible?

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red:active {
  background-color: red;
}

<div class="red"></div>
<div class="green"></div>

Check out my JSfiddle right here; Now as you click on the red square it fills up, but how can I make it fill up the green square when I click on the red square? It's like clicking on an element and making it activate on something else?

I want to be able to click on something and then something other needs to do something, and not the same element, without javascript, is that possible?

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red:active {
  background-color: red;
}

<div class="red"></div>
<div class="green"></div>

• javascript
• jquery
• html
• css

4 Answers 4

You can achieve this using CSS with the sibling selector: +, like this:

.red:active + .green {
  background-color: green;
}

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red:active {
  background-color: red;
}

.red:active + .green {
  background-color: green;
}

<div class="red"></div>

<div class="green"></div>

Note that if the .green element does not immediately follow the .red element then you could also use the general sibling selector (~) too.

Try this:

    .red:active + .green {
    background-color:green;
}

But remember, the green class element must be after the red one.

If I understand correctly, you could do this by using a class 'active' and toggleClass() instead of the pseudo selector :active

$('.red').click(function(){ 
	$('.green').toggleClass('active');
});

.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
}

.red.active  {
  background-color:red;
}

.green.active  {
  background-color:green;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">

</div>

<div class="green">
</div>

Yes it's possible but you will need to change the layout so that green is inside red.

Have a look at this jsfiddle

https://jsfiddle/fed92oxr/

<div class="red">
  <div class="green"></div>
</div>


.red {
  border: solid 10px red;
  width: 50px;
  height: 50px;
}

.green {
  border: solid 10px green;
  width: 50px;
  height: 50px;
  margin-top: 60px;
  margin-left: -10px;
}

.red:active > .green {
  background-color:green;
}