Bonjour à tous,

j'aimerais qu'un enfant d'un de mes éléments HTML hérite des propriétés d'un élément parent. L'idée est d'éviter de répéter mon code à chaque fois que je modifie l'élément en cause puisqu'il s'agit ici d'images. 

Si je parviens à faire que l'élément parent transmet ses propriétés à l'image, cela me permettra de copier coller plus aisément.

Jusqu'à présent je dois insérer les classes directement dans les images (pour une raison qui m'échappe par ailleurs) et cela est assez laborieux sur une grande quantité d'images.

Ici mon code HTML :

<div class="terroirBloc">

  Notre terroir




<div id="slideBox">
<ul class="terroirSlideShow">

  <li class="slide showing">  <img src="../../legacy/fields1.jpg" alt=""> </li>
  <li class="slide">  <img  src="../../legacy/Futuroscope1.jpg" alt=""> </li>
  <li class="slide">    <img src="../../legacy/mountain1.jpg" alt=""> </li>
      <li class="slide">  <img src="../../legacy/poitierTown1.jpg" alt=""> </li>
        <li class="slide">  <img src="../../legacy/wineCheese1.jpg" alt=""> </li>
</ul>
 </div>
</div>

ici mon CSS :

.terroirBloc {

  width : 85% ;
  height : 55% ;
text-align :center;
  margin : auto ;
  margin-top: 20% ;

  color : #0B1517 ;
  background-color: rgba(254,236,200, 0.5);
  border-radius : 10%;

 font-size : 185% ;

}

.terroirSlideShow {

  position: relative;
     height: 300px;
     padding: 0px;
     margin: 0px;
     list-style-type: none;
}



.slide   {

  position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 1;

   -webkit-transition: opacity 3.62s;
   -moz-transition: opacity 3.62s;
   -o-transition: opacity 3.62s;
   transition: opacity 3.62s;
}


.showing {
    opacity: 1;
    z-index: 2;
}

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;

}

J'ai tenté de faire :

- .slide > img, sans succès, les propriétés de slide n'atteignent pas l'image,

- li.slide>img de même échoue,

- dans un geste de baroud d'honneur, j'ai tenté un slide ~ img qui a parfaitement échoué,

si quelqu'un a des suggestions je suis intéressé ^^,

bien à vous,

Armand

-
Edité par ArmandDuchatel 20 mars 2018 à 16:04:03

Hello,

.slide img {
  ...
}

Si j'ai bien compris, c'est ça que tu cherches à faire (t'étais pas loin).

-
Edité par MrChampy 20 mars 2018 à 16:08:18

...  ? !!!!  (y), 

thank a lot ,

Armand