Timeline CSS personnalisée avec un style impaire/pair

Question

Je veux supprimer la première ligne de la timeline CSS que j'ai créée, je veux juste que le cercle temporel apparaisse en premier pour ne pas avoir de ligne avant. Je veux aussi styliser chaque couleur différente de point, comment puis-je faire ces deux?

J'ai essayé d'ajouter une classe à l'un des conteneurs de scénario appelés .not_complete mais cela ne change pas la couleur du cercle de la timeline.

/* The actual timeline (the vertical ruler) */ 
 
.timelinex { 
 
    position: relative; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding-bottom: 5em; 
 
} 
 

 
/* The actual timeline (the vertical ruler) */ 
 
.timelinex:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0px; 
 
    background-color: #fff; 
 
    top: auto; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
.timelinex::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 4px; 
 
    background-color: #e3e3e3; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
/* Container around content */ 
 
.containerx { 
 
    padding: 10px 40px; 
 
    position: relative; 
 
    background-color: inherit; 
 
    width: 50%; 
 
} 
 

 
/* The circles on the timeline */ 
 
.containerx::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    right: -5px; 
 
    background-color: #e3e3e3; 
 
    top: 15px; 
 
    border-radius: 50%; 
 
    z-index: 1; 
 
} 
 

 
.containerx::after .not_complete { 
 
    background-color: #e3e3e3 !important; 
 
} 
 

 
/* Place the container to the left */ 
 
.leftx { 
 
    left: 0; 
 
} 
 

 
/* Place the container to the right */ 
 
.rightx { 
 
    left: 50%; 
 
} 
 

 
/* Fix the circle for containers on the right side */ 
 
.rightx::after { 
 
    left: -7px; 
 
} 
 

 
/* The actual content */ 
 
.contentx { 
 
    padding: 2px 3px; 
 
    position: relative; 
 
    border-radius: 6px; 
 
}

<div class="timelinex"> 
 
    <div class="containerx leftx not_complete"> 
 
    <div class="contentx"> 
 
     <p> 
 
     <img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"> 
 
     </p> 
 
     <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5> 
 
     <div> Test Timeline Step 1</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Le sélecteur ici est invalide:

.containerx::after .not_complete { 

Il choisirait l'enfant de l'élément ::after pseudo. Vous devez utiliser:

.containerx.not_complete::after { 

Le sélecteur ci-dessus sélectionne ::after élément pseudo de tout élément, avec les classes containerx et not_complete. Alors, veuillez remplacer votre code par:

.containerx.not_complete::after { 
    background-color: #e3e3e3 !important; 
} 

Espérons que cela résout votre problème.

complet Snippet

/* The actual timeline (the vertical ruler) */ 
 
.timelinex { 
 
    position: relative; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding-bottom: 5em; 
 
} 
 

 
/* The actual timeline (the vertical ruler) */ 
 
.timelinex:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0px; 
 
    background-color: #fff; 
 
    top: auto; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 

 
.timelinex::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 4px; 
 
    background-color: #e3e3e3; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left: -3px; 
 
} 
 

 
/* Container around content */ 
 
.containerx { 
 
    padding: 10px 40px; 
 
    position: relative; 
 
    background-color: inherit; 
 
    width: 50%; 
 
} 
 

 
/* The circles on the timeline */ 
 
.containerx::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    right: -5px; 
 
    background-color: #e3e3e3; 
 
    top: 15px; 
 
    border-radius: 50%; 
 
    z-index: 1; 
 
} 
 

 
.containerx.not_complete::after { 
 
    background-color: #e3e3e3 !important; 
 
} 
 

 

 
/* Place the container to the left */ 
 
.leftx { 
 
    left: 0; 
 
} 
 

 
/* Place the container to the right */ 
 
.rightx { 
 
    left: 50%; 
 
} 
 

 

 
/* Fix the circle for containers on the right side */ 
 
.rightx::after { 
 
    left: -7px; 
 
} 
 

 
/* The actual content */ 
 
.contentx { 
 
    padding: 2px 3px; 
 
    position: relative; 
 
    border-radius: 6px; 
 
}

<div class="timelinex" > 
 
    <div class="containerx leftx not_complete"> 
 
    <div class="contentx"> 
 
     <p><img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"></p> 
 
     <h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5> 
 
     <div> Test Timeline Step 1</div> 
 
    </div> 
 
    </div> 
 
</div>

Mise à jour: Pour Même/Odd style et premier enfant.

Pour créer un style impair et pair, vous devez utiliser le sélecteur :nth-child(). Un exemple de l'avoir bleu et rouge est ici:

li { 
 
    display: block; 
 
    width: 200px; 
 
    padding: 10px; 
 
    color: #fff; 
 
} 
 
li:nth-child(odd) { 
 
    background: #00f; 
 
} 
 
li:nth-child(even) { 
 
    background: #f00; 
 
} 
 
li:first-child { 
 
    background: #000; 
 
    font-weight: bold; 
 
}

<ul> 
 
    <li>First Child</li> 
 
    <li>Even</li> 
 
    <li>Odd</li> 
 
    <li>Even</li> 
 
    <li>Odd</li> 
 
</ul>