Bonjour à tous.

j'essaie de recréer une progressBar qui se charge quand on clique sur le bouton charger. 
Comme dans cette exercice. 

 Mais j'ai du mal à comprendre la logique pour faire en sorte que :active sur un bouton puisse déclencher l'animation sur un élément combiné. 

D'ailleurs j'ai du mal a comprendre la différence entres les combinateur + et > en css

( .parent + .enfant ) ( la regle css et appliquer au 2 classes ) 

(.parent > .enfant ) ( la regle css est appliquer seulement a .enfant si il est précédé de .parent ? )  

C'est bien ça la différence ? 

Voici mon bloc html 

    <div class="progress">
        <h3 class="title3 progress__title">ProgressBar</h3>
        <div class="progress__bar"></div>
        <button class="progress__btn">charger</button>
    </div>

Et voici mon code SCSS

.progress{
    border: 5px solid black;
    text-align: center;
}

.progress__bar{
    width:50%;
    height:20px;
    border: 2px solid black;
    background-color: red;
    padding-bottom: 10px;
    margin: 0 auto;
}

.progress__btn{
    margin: 10px;
}

L'idée c'est de faire en sorte que quand le progress__btn est :active le background-color de la progress__bar apparaisse de droite a gauche. 
J'ai essayer d'intégrer le :active de plusieurs façon différente mais aucune ne fonctionne. 

-
Edité par Tortue_Ninja 30 août 2021 à 19:09:01

Salut, c'est normal que tu n'y arrives pas, il y a une astuce qui n'est pas précisée:

En css, tu es limité en terme de sélecteur, tu ne peux pas faire ce que tu veux, sinon le JS ne servirai pas à grand chose. Ici ce qu'on veut, c'est quand on clique sur le bouton, la progressBar se remplisse.

La plupart des sélecteurs CSS agissent sur les descendants d'un noeud. Le bouton et la progressBar n'ont pas de lien de parenté, par contre ils sont voisins. Et il y a un sélecteur qui permet de sélectionner le voisin suivant, c'est "+".

A+B, permet de sélectionner B. Ca marchera pas dans notre cas, car le bouton est après la progressBar (A= progressBar, B=bouton).

L'astuce va donc consister à placer le bouton avant la progressBar (cf le HTML de l'exo) et ensuite modifier le containeur principal pour afficher les éléments dans l'ordre inverse via les flexbox par exemple pour faire passer le bouton en bas du container à l'affichage.

Maintenant on peut agir sur la progressBar via le sélecteur "+" en fonction de l'état du bouton. A=bouton:active, B=progressBar.

Regarde mon code, tu devrais mieux comprendre:

https://jsbin.com/ponisulohi/edit?html,css,output

Pour le sélecteur ">" ici il n'est pas vraiment nécessaire, il sert à sélectionner uniquement les enfants directes d'un élément (et non pas les enfants des enfants).

-
Edité par NadfriJS 31 août 2021 à 13:06:13

Merci

Je comprend un peu mieux le systeme et j'arrive a faire une progress bar maintenant. 

Si j'ai bien compris :
Les 2 sélecteurs  > et + servent à sélectionner uniquement l'enfant direct d'un élément.
Et la différence c'est qu'avec le sélecteur "+" ça permet d'agir sur l'enfant direct d'un élément selon l'état de l'élément parent.  ( ce qui n'est pas le cas avec le sélecteur ">" ) ? 

J'ai réussi a faire une Progress bar visible  ici 
Par contre j'ai un miniBug quand la couleur remplis la progress bar il y a une mini marge a gauche et en bas que je n'arrive pas à enlever .... 

Et un 3e et dernier point. J'aurai aimé pouvoir faire une progressBar avec une seul div ( sans la div bar par rapport a ton code ) 

Avec un code html comme celui ci ( sans le code en commentaire ) 

    <h3 class="title3 progress__title">ProgressBar</h3>
    <div class="progress">
        <button class="progress__btn">charger</button>
        <div class="progress__bar">
            <!-- <div class="bar"></div> -->
        </div>
    </div>

ça aurait été possible ?

-
Edité par Tortue_Ninja 31 août 2021 à 15:41:00

Pour le décalage, je ne vois pas d'où cela peut venir, j'ai testé sur JSBIN, et le décalage n'apparait pas.

Pour les sélecteurs: 

• + permet de sélectionner le voisin immédiat suivant
• > permet de sélectionner uniquement les enfants aux 1er degré (pas les enfants des enfants)

Dernier point, il est vrai qu'en réalité on ne passe pas par une 2eme div. On utilise les pseudo-class ::before ou ::after.

C'est un poil plus complexe mais ca permet de faire plein de superbe animations combinées.

https://codepen.io/nadfri/pen/jOwWgXW

Enfait, on va placer notre pseudo élément en position absolute par rapport à la progressBar(qui doit être en relative), les pseudo éléments servent à afficher un texte, nous cela nous intéresse pas, mais il faut quand même utiliser l'attribut content et lui donner comme paramètre une chaine vide.

-
Edité par NadfriJS 31 août 2021 à 17:22:05

Ah ok, donc le sélecteur '+' sélectionne le voisin suivant même si il n'est pas enfant ? 
Je testerai la seconde méthode demain. 

Merci pour les réponses.

Oui le +, c'est le voisin immédiat de l'élément A.

Plus d'infos sur les selecteurs CSS ici: 

https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Super Merci pour les infos !!!! 
Je viens de découvrir ::before et ::after en continuant le cours CSS animation