Bonjour,

Je cherche un selecteur CSS qui permer de cibler la class navigation-auto, je l'ai mis à l'extérieur de la <div> parceque avec le selecteur ~ ça marche mais les boutons ne sont pas responsives 

<div class="slides">
											<!--radiobuttons start--->
											
											<input type="radio" name="radio-btn" id="radio1">
											<input type="radio" name="radio-btn" id="radio2">
											<input type="radio" name="radio-btn" id="radio3">
											<input type="radio" name="radio-btn" id="radio4">

											<!--radiobuttons END--->

											<!--Slide image start--->

											<div class="slide first">
												<img src="image.jpg" alt="">
											</div>
											<div class="slide">
												<img src="images2.jpg" alt="">
											</div>
											<div class="slide">
												<img src="images3.jpg" alt="">
											</div>
											<div class="slide">
												<img src="images4.jpg" alt="">
											</div>

											<!--slide image END--->

											<!--Automatic Navigation start-->

											<!--<div class="navigation-auto" PAS CELUI LA POUR LA SELECTION>
												<!--<div class="auto-btn1"></div>-->
												<!--<div class="auto-btn2"></div>-->
												<!--<div class="auto-btn3"></div>-->
												<!--<div class="auto-btn4"></div>-->
											<!--</div>-->

											<!--Automatic Navigation End-->


										</div>

										<!--Automatic Navigation start-->

											<div class="navigation-auto">
												<div class="auto-btn1"></div>
												<div class="auto-btn2"></div>
												<div class="auto-btn3"></div>
												<div class="auto-btn4"></div>
											</div>

											<!--Automatic Navigation End-->



										<!--Manual Navigation start-->

										<div class="navigation-manual">
											<label for="radio1" class="manual-btn"></label>
											<label for="radio2" class="manual-btn"></label>
											<label for="radio3" class="manual-btn"></label>
											<label for="radio4" class="manual-btn"></label>
										</div>

										<!--Manual Navigation End-->

											

									</div>

Voici mon css

#radio1:checked ~ .navigation-auto .auto-btn1{
	background: #40D3DC;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
	background: #40D3DC;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
	background: #40D3DC;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
	background: #40D3DC;
}

Merci

-
Edité par CyranoDecasa 19 septembre 2021 à 16:07:25

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : selecteur CSS)

Bonjour,

Ton code n'est pas très clair. Il est indenté bizarrement et commenté de partout. S'il était possible de focus les points qui correspondent à la question ce serait plus simple.

Néanmoins, peut être que ce LIEN pourra t'aider. Mais je pense que dans ton cas un simple sélecteur ne pourra pas t'aider. Soit tu donnes à .navigation-auto une classe en plus pour pouvoir la viser, soit tu ajoutes un ID si jamais c'est uniquement à cette seule div que tu veux donner ces règles css.

En espérant avoir pu t'aider.

-
Edité par VincentAllio1 19 septembre 2021 à 18:15:24