28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit soucis pour le fonctionnement de ma timeline.. J'aimerais que si je mets ma classe active sur un item de ma time line.. Tout les items qui précédent ont la même règle css que celui-ci.
J'avoue être perdu avec les nth-child & cie ...


<ul class='timeline'>
  <li class='timeline__item'></li>
  <li class='timeline__item'></li>
  <li class='timeline__item timeline__item_active'></li>
  <li class='timeline__item'></li>
  <li class='timeline__item'></li>
</ul>



.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 100px auto; 
    width: 100%; 
    &__item{
        float: left;    
        text-align: center;
        width: 2rem;   
        position: relative;  
        &:before {
            content: '';
            line-height: 35px;
            width: 1rem;
            height: 1rem;
            display: block;
            border-radius: 100%;
            border: 1px solid #ff9800;
            margin: 0 auto 15px auto;  
            background: #fff;
          }
          
          &:after {
            content: '';
            width: 100%;
            height: 3px;
            background: #DDD;
            display: block;
            position: absolute;
            top: 0.45rem;
            left: 50%;
            border: 1px solid #ff9800;
            z-index: -1;
          }
          &:last-child:after {
            content: none;
          }
          &_active{
            &:before{
                background: #ff9800
          }
          &:before{
                background: #ff9800
          }
        }
    }
  }


https://codepen.io/sQuirrel4k/pen/ZdOggo
Modérateur
Alors on peut faire l'inverse, (tous les items qui suivent) avec le sélecteur ~

Du coup il suffit de reseter ceux qui suivent.

          &_active {
            & ~ li:before {
               background: white;
            }
          }
          &:before {
            background: #ff9800;
          }


Par contre si tu n'as aucun item actif, tous les items seront «actifs»
Modérateur
Hello,
Il te suffit simplement d'avoir une état actif par défaut et puis pour "tous ceux qui suivent l'élément actif" (avec tild ~), tu appliques un styles différent. Voici le fork.
Administrateur
Bonjour,

tu ne peux pas indiquer cela "tous ceux qui précèdent" mais tu peux tous les styler puis styler différemment ceux qui suivent avec le sélecteur
A ~ B
.