[Résolu] TimeLine

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

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»

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.

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

.

Ou alors il faut conjuger «tout ceux qui suivent» avec l'inversion du flux de flex:

https://codepen.io/anon/pen/MMjWGa

Ce qui fait que si aucun n'est sélectionné, cela fonctionne toujours

Merci pour vos réponses! @Kustolovic, je suis parti vers ton principe.