Cibler un élément frère adjacent

**AlexG21000** · 17/03/2021, 18h49

Bonjour,

Toujours en apprentissage de Sass (.scss) je souhaiterais en appuyant sur un bouton, remplir une barre.
J'ai le cadre de ma barre qui est voisin du bouton, et la barre qui est l'enfant du cadre. Mais voilà, je n'arrive pas du tous à activer le remplissage de la barre.

Voici le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="progress"> <!--Le cadre de la barre-->
    <div class="progress__bar"></div> <!--la barre de chargement-->
</div>
<input class="btn" type="button" value="click">

Voici le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.progress { //le cadre de la barre
    @extend %margin-top-bot;
    position: relative;
    width: $bar-box-sizeW;
    height: $bar-box-sizeH;
    border: black 2px solid;
    background-color: white;
    &__bar { //la barre de chargement
        @include absolute-el(0,0,0,0,0,0);
        width: $bar-sizeW;
        height: $bar-sizeH;
        background-color: green;
        transform: scaleX(0); //la barre est vide
        transform-origin: left;
        transition: transform 2000ms;
    }
}
 
.btn {
    @extend %btn;
    @extend %margin-top-bot;
    &:active + .progress > .progress__bar { //Ici je galère à trouvé comment cibler la barre
        transform: scaleX(1); //la barre est pleine
    }
}

J'ai essayé &:active + .progress__bar aussi mais ça ne fonctionne toujours pas.

Et autre chose, comment ce fait-il que lors du chargement de la page je vois la barre se vider?
Étant donné que je lui est mis transform: scaleX(0); ne devrait-elle pas apparaître vide?

Merci d'avance du coup de main.
Je me forme sur OpenClassRooms, et même si dans l'ensemble j'avance bien, certaines choses sont encore dans l'ombre, et les cours ne m'éclaircissent pas.

**NoSmoking** · 17/03/2021, 19h37

Bonjour,
là tu essaies, comme les saumons, de remonter la cascade.

Si l'on regarde de plus près ton sélecteur, il faut lire de droite à gauche, : .btn:active + .progress > .progress__bar, il signifie que tu cherches un élément ayant la classe progress__bar enfant direct d'un élément ayant la classe progress qui est frère adjacent, en descendant, d'un élément ayant la classe btn.

Si tu veux que cela fonctionne il te faut mettre ton bouton avant ta progress-bar.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<input class="btn" type="button" value="click">
<div class="progress"> <!--Le cadre de la barre-->
    <div class="progress__bar"></div> <!--la barre de chargement-->
</div>

**AlexG21000** · 17/03/2021, 21h13

Alors, si je comprend bien, je me suis pas loupé sur le ciblage, mais par contre mon bouton est mal placé.

Alors comment aurais-je dû faire, si je voulais que le bouton sois bien après la barre et non avant (mais sans modifier la position dans le css, je parle bien des combinateurs etc...)?
Le cours que je suis explique bien comment il faut ajouter au classes existantes les child, descendant, adjacent, etc... Mais dès qu'on veut sortir de la base, genre là faire interagir deux éléments entre eux, y'a rien. Alors j'avance à tâtons.
Connaîtrais-tu un site ou c'est bien expliqué et détaillé, parce que même les vidéos sur youtube survol j'ai l'impression et ne pousse pas plus loin.

Et cette histoire que je vois la barre se vider au chargement je sais que c'est en rapport avec le transition, car elle met le même temps. Mais comment faire pour qu'au chargement on ai pas les effets qui se mettent à zéro comme ça?

**NoSmoking** · 18/03/2021, 10h05

Alors, si je comprend bien, je me suis pas loupé sur le ciblage, mais par contre mon bouton est mal placé.

Cela revient à se planter pour le ciblage

Alors comment aurais-je dû faire, si je voulais que le bouton sois bien après la barre et non avant (mais sans modifier la position dans le css, je parle bien des combinateurs etc...)?

La structure du HTML est la structure du HTML mais le rendu à l'écran peut-être bien différent.

Voici de que l'on peut faire, en exceptant les positionnements en flottants et absolus :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inversion élément à l'affichage</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2105821">
<meta name="description" content="Inversion élément à l'affichage">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
main {display: block;margin: auto;max-width: 60em;}
section {display: flex;position: relative;flex-direction: column;align-items: flex-start;margin: 0 1em 1em;}
</style>
<style>
.progress {
  position: relative;
  width: 20em;
  height: 2em;
  border: 1px solid #000;
  background-color: #FFF;
}
.progress__bar {
  width: 0;
  height: 100%;
  background-color: #080;
  transition: width 2s;
}
.btn {
  font: inherit;
}
.btn:active + .progress > .progress__bar {
  width: 100%;
}
.conteneur {
  position: relative;
  margin: 2em 1em;
  padding: .5em;
  border: 1px solid #ABC;
  background: #FAFAFA;
}
.conteneur:after {
  content: '\003C div class="'attr(class) '"\003E';
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  color: #069;
  transform: translateY(-120%);
}
.display-table {
  display: table;
}
.display-caption {
  display: table-caption;
}
.flex-col-order {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.flex-col-order .btn {
  order: 2;
}
.flex-col-column-reverse {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.flex-row-order {
  display: inline-flex;
  max-width: 20em;
  flex-wrap: wrap;
}
.flex-row-order .btn {
  order: 2;
}
.flex-row-row-reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.flex-row-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
  max-width: 20em;
}
</style>
</head>
<body>
  <main>
    <header>
      <time datetime="2021-03-18">Mars 2021</time>
      <h1>Inversion élément à l'affichage</h1>
    </header>
    <section>
    <div class="conteneur">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur display-table">
      <button class="btn">Click</button>
      <div class="progress display-caption">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur flex-col-order">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur flex-col-column-reverse">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur flex-row-order">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur flex-row-wrap-reverse">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
 
    <div class="conteneur flex-row-row-reverse">
      <button class="btn">Click</button>
      <div class="progress">
        <div class="progress__bar"></div>
      </div>
    </div>
    </section>
  </main>
</body>
</html>

Tu noteras :

que le premier exemple et la présentation standard ;
que je n'utilise pas scale() pour agrandir l'élément mais width, on aurait pu également jouer avec le background.

Connaîtrais-tu un site ou c'est bien expliqué et détaillé, parce que même les vidéos sur youtube survol j'ai l'impression et ne pousse pas plus loin.

Les cas particuliers ne sont pas traités de façon générique, il faut donc interpréter et surtout tester.

Et cette histoire que je vois la barre se vider au chargement je sais que c'est en rapport avec le transition, car elle met le même temps. Mais comment faire pour qu'au chargement on ai pas les effets qui se mettent à zéro comme ça?

Pas vu le soucis !

pour info :

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

**AlexG21000** · 18/03/2021, 16h14

Merci pour toutes ces infos.
Il y a certaines choses que je ne connais pas dans le code que tu as mis.
Je vais fouiller pour comprendre.

En tous cas, merci bien.

**NoSmoking** · 19/03/2021, 17h48

En bonus mais en ajoutant un élément relié <label>, copie ce bout de HTML dans l'exemple donné

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="conteneur">
  <button class="btn" hidden id="btn-clic">Click</button>
  <div class="progress">
    <div class="progress__bar"></div>
  </div>
  <label for="btn-clic">...Click...</label>      
</div>

le <button> est caché, attribut hidden, mais « piloté » par le <label> via l'attribut for, c'est un classique !

Cibler un élément frère adjacent

CSS

Vue hybride

Discussions similaires

Partager

Partager