CSS - When you click change another element

1

I wanted to know how to do so when I click the h1 button change to red color, just with css

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		button:active + h1 {
			color: red;
		}
	</style>
</head>
<body>
	<h1>OI</h1>
	<button>X</button>
</body>
</html>
    
asked by anonymous 20.06.2018 / 23:16

1 answer

3

You can do this using Checkbox Hack :

/* Checkbox Hack */
#toggle-1 {
   display:none;
}

label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}


/* CSS quando o checkbox está marcado */
#toggle-1:checked ~ #cabecalho {
   color:Red;
}
<label for="toggle-1">
  Clique aqui
</label>
<input type="checkbox" id="toggle-1">
<h1 id="cabecalho">Texto</h1>
    
20.06.2018 / 23:25