Discussion :

[haddocks]

Bonjour,
voici la page ou se trouve le code: https://la-cascade.io/layout-sur-12-...-avec-flexbox/
voici le code:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
  <div class="column">Fourth</div>
</section>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
 
section:first-of-type .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}

Je ne comprend pas le ciblage : section:first-of-type .column:first-of-type {,
section:first-of-type cible les premiers de chaque type d'élément dans section. Il y à 2 sections, donc, pour moi, mais corrigez moi si je me trompe, celà cible la première Div de chaque section.
.column:first-of-type Là je comprends pas parce que first-of-type est associé à une classe

Que veut dire ce ciblage exactement ?

[haddocks]

Bon bas je crois que j'ai compris: section:first-of-type sélectionne la première div de chaque section, donc 2 divs de class "column":

Code html :

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

1
2
  <div class="column">First</div>
  <div class="column">Second</div>

et .column:first-of-type sélectionne la première de la liste, c'est à dire la première div de la première section, donc le premier block de la première ligne.

Code html :

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

 <div class="column">First</div>

PS: comment faire ce genre de présentation:
section:first-of-type .column:first-of-type {Un modérateur à dû modifier mon premier poste car je ne sais pas faire ça.
La commande utilisé est C entouré de [] et un autre /C entouré de []
Où se trouve cette commande ?

[ProgElecT]

PS: comment faire ce genre de présentation:
section:first-of-type .column:first-of-type.
Où se trouve cette commande ?

y a pas.
Le plus simple est d'utiliser le B qui donne [B][/B] et de remplacer le B par des C

[NoSmoking]

Bonjour,

Bon bas je crois que j'ai compris: section:first-of-type sélectionne la première div de chaque section, donc 2 divs de class "column":

Non !
Sélectionne le premier enfant de type désigné, ici l'élément c'est une <section>.

et .column:first-of-type sélectionne la première de la liste, c'est à dire la première div de la première section, donc le premier block de la première ligne.

Toujours Non !
sélectionne le premier enfant de classe « column ».

Donc si on cumule : section:first-of-type .column:first-of-type, en lisant de droite à gauche, on obtient :
le premier enfant de classe « column ». et étant le premier enfant du premier élément <section>.

Nota :
avec le code suivant :

Code html :

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

1
2
3
4
5
<section>
  <div class="column">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>

l'élément <div class="column">First</div> sera ciblé

avec le code suivant :

Code html :

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

1
2
3
4
5
<section>
  <div class="autre-class">First</div>
  <div class="column">Second</div>
  <div class="column">Third</div>
</section>

aucun l'élément ne sera ciblé, le premier enfant n'ayant pas la classe column.

[jreaux62]

Bonjour,

...celà cible la première Div de chaque section.

Pour cibler la première div de chaque section :

Code css :

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

section > div:first-child {