Bonjour !

Je deviens folle avec mon CSS.

J'aimerais que les paragraphes <p> changent de couleur lorsque je clique sur une checkbox.

La checkbox en question a une classe appelée "checkbox" (j'aurais peut-être dû lui lui mettre une id d'ailleurs).

Pour changer la couleur du fond de la page ça marche (j'ai créé une <div> spéciale rien que pour le fond. Mais au moment de changer les <p> rien à faire, ça bouge pas !

<div class="main">
		<input type="checkbox" class="checkbox" name="toggle" id="toggle">
		<label for="toggle" class="for-checkbox"></label>
		<!--Background--><div class="bg"></div><!--background-->
	<!-- -->
	<div class="container">
				<p class="heading">Hello</p>
		<div class="container-flex">
			<div class="box">
				<input type="checkbox" class="for-checkbox-2" name="checkbox-1" id="checkbox-1" checked>
				<label for="checkbox-1" class="for-checkbox-2">Hey</label>
			</div>
			<div class="box">
				<input type="checkbox" class="for-checkbox-2" name="checkbox-1" id="checkbox-2">
				<label for="checkbox-2" class="for-checkbox-2">Yo</label>
			</div>
			<div class="box">
				<input type="checkbox" class="for-checkbox-2" name="checkbox-1" id="checkbox-3">
				<label for="checkbox-3" class="for-checkbox-2">Hallo</label>
			</div>
			<div class="box">
				<input type="checkbox" class="for-checkbox-2" name="checkbox-1" id="checkbox-4">
				<label for="checkbox-4" class="for-checkbox-2">Hej</label>
			</div>
		</div>
	</div>

body {
	font-family: "lato";
}

/*???*/
.main {
	width: 100%;
	height: 100%;
}

/*MASQUE LES CHECKBOX D'ORIGINE*/
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}

/*LABEL QUI SE TROUVE APRES LES INPUT.CHECKBOX - BARRE DEGRADE*/
.checkbox:checked + label,
.checkbox:not(:checked) + label {
	/*POSITION PAR RAPPORT A LA FENETRE*/
	position: relative;
	margin: 17px auto;
	margin-top: 100px;
	z-index: 100 !important;
	/*-------------------------------*/
	display: block;
	padding: 0;
	width: 70px;
	height: 6px;
	border-radius: 4px;
	background-image: linear-gradient(to right top, #8f2d67, #c44660, #e86f51, #f7a144, #f1d84b);
	text-align: center;
}

/*LABEL QUI SE TROUVE APRES LES INPUT.CHECKBOX - ROND GRIS*/
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
	font-family: "unicons";
	font-size: 20px;
	line-height: 40px;
	position: absolute;
	cursor: pointer;
	top: -15px;
	z-index: 2;
	text-align: center;
	width: 40px;
	height: 40px;
	background: #474554;
	border-radius: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
/*vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/

/*UNIQUEMENT A GAUCHE (NOT CHECKED)*/
.checkbox:not(:checked) + label:before {
	left: 0;
	content: '\eac1';
	color: white;
}
/* UNIQUEMENT A DROITE (CHECKED) */
.checkbox:checked + label:before {
	left: 30px;
	content: '\eb8f';
	color: #f7a144;
}
/* FOND QUI CHANGE DE COULEUR */
.bg {
	background: #696676;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 0.3s linear;
}
/* ACTIVE CHANGEMENT COULEUR FOND EN BLANC */
.checkbox:checked ~ .bg {
	background: #fff;
	color: red;
}

/* STYLE P.HEADING */
.heading {
	position: relative;
	margin-top: 100px;
	text-align: center;
	z-index: 10; /*important*/
		border: 1px solid red;
	transition: all 0.3s linear;
}

.checkbox:checked ~ p { color: red; }



.container-flex {
	display: flex;
	width: 100%;
	z-index: 100;
	flex-wrap: wrap;
	justify-content: center;
}

.box {
	width: 80px;
	height: 80px;
	padding: 10px;
	margin: 5px;
	background: #8C8A9A;
	color: #fff;
	text-align: center;
	line-height: 80px;
	z-index: 100;
}


.box:hover{
	cursor: pointer;
}

ça foire sur le css en rouge foncé.

Je vous mets le codepen où j'ai fait les tests.

https://codepen.io/CodeCaptina/pen/NmpYZm 

Bonjour Tsarina

Le sélecteur Css ~ permet de sélectionner tous les éléments Y qui sont situés après l'élément X et ayant le même parent.

.checkbox:checked ~ .container p