bonjour 

je tente de créer un slider avec bootstrap 4.0

je souhaite (EN CSS) faire en sorte que quand un élément contient la classe active une balise qui se trouve à l'extérieur change. 

Selon toute mes recherches les deux éléments doivent être frère, voisin, parent ou enfant, ce qui n'est pas mon cas 

voici le code

	<header>
		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
		  <ol class="carousel-indicators">
			<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
		  </ol>
		  <div class="carousel-inner">
			<div class="carousel-item active">
			  <img class="d-block w-100 h-100" src="/img/img_slider/cleaning-supply-wood-flatlay_925x.jpg" alt="First slide">
			</div>
			<div class="carousel-item">
		  	  <a href="#">lien</a>
			  <img class="d-block w-100 h-100" src="/img/img_slider/flatlay-for-construction_925x.jpg" alt="Second slide">
			  
			</div>
			<div class="carousel-item">
			  <img class="d-block w-100 h-100" src="/img/img_slider/teacher-flatlay_925x.jpg" alt="Third slide">
			</div>
		  	<div class="carousel-item">
			  <img class="d-block w-100 h-100" src="/img/img_slider/digital-photography-flatlay_925x.jpg" alt="Third slide">
			</div>
		  <div class="carousel-item">
			  <img class="d-block w-100 h-100" src="/img/logo%20devisgagnant.png" alt="Third slide">
			</div>
		  </div>
		  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		  </a>
		  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		  </a>
		  
		</div>
		<div class=""> <!-- class caroussel indicator-->
		  	<h2 data-target="#carouselExampleIndicators" data-slide-to="0" class="active">Image 1</h2>
			<h2 data-target="#carouselExampleIndicators" data-slide-to="1">Image 2</h2>
			<h2 data-target="#carouselExampleIndicators" data-slide-to="2">Image 3</h2>
			<h2 data-target="#carouselExampleIndicators" data-slide-to="3">Image 4</h2>
			<h2 data-target="#carouselExampleIndicators" data-slide-to="4">Image 5</h2>
		  </div>
		
	</header>

et je souhaiterais que quand l'image 2 possède la classe active le titre Image 2 soit ciblé afin d'appliquer le css

css 

.carousel-item.active:nth-child(2) + h2:nth-child(2){
	color: red;
}
/* ou *\
.carousel-item.active:nth-child(2) ~ h2:nth-child(2){
	color: red;
}
/* je ne vois pas comment cibler l'élément h2 quand le carousel-item est aussi active

merci pour votre attention et votre compréhension

Voir ici:

Bootstrap 4 Carousel Fade par skelly

https://www.codeply.com/go/LhLJlldsLN

Bonjour, merci pour ton intervention, 

mais je souhaite avoir des onglets dessous comme sur cet exemple

Un slider avec des onglets qui quand on clique permette de faire apparaître des images associé sans javascript

Bonjour born1,

Pour moi, c'est pas possible en Css avec ce code HTML

Mais tu peux le faire en Javascript :

https://codepen.io/Zonecss/pen/BgOqdO

Je pense que ton code est faux si tu veux faire comme sur l'exemple que tu donnes

dans ton code le  <ol class="carousel-indicators"> doit correspondre à ton <div class="">

En fait tu as juste à adapter le code de l'exemple que tu donnes?

-
Edité par AliasDmc 14 juillet 2019 à 21:30:58

Vrai ?

Ça m'embête ! 

Et j'ai mis la div contenant les onglets dans la div slide, et supprimé les next et previous

Le problème persiste, 

Je ne peux donner d'exemple, je suis à l'extérieur sur mon téléphone mobile