Discussion :

[Aizen64]

J'ai un cas que l'on me demande d'implémenter uniquement en CSS sans utiliser du JS et je bloque.

Code html :

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

1
2
3
4
5
6
<div id="bloc-a-afficher-ou-pas">
</div>
<div class="un-selecteur">
</div>
<div class="un-selecteur">
</div>

L'objectif est le suivant :
- comportement par défaut : masquer le div avec l'id "afficher-ou-pas"
- si l'un des siblings avec la classe "un-selecteur" a la classe "actif" alors le bloc a affiché doit être visible.

Je n'ai pas de problème pour le comportement par défaut mais je n'arrive pas à écrire l'autre.

[Invité]

Bonjour,

A priori, SASS fonctionne comme CSS : en "Cascade".
On ne peut pas remonter une cascade.

Ca ne fonctionnera QUE si le "bloc-a-afficher-ou-pas" se trouve APRES les bloc "actif".
Pas AVANT.

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="bloc-a-afficher-ou-pas">
  bloc-a-afficher-ou-pas n° 1
</div>
<div class="un-selecteur actif">
  un-selecteur
</div>
<div class="bloc-a-afficher-ou-pas">
  bloc-a-afficher-ou-pas n° 2
</div>

Code css :

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

1
2
.bloc-a-afficher-ou-pas { display:none; }
.un-selecteur.actif ~ .bloc-a-afficher-ou-pas { display:block; }

Affiche :

un-selecteur
bloc-a-afficher-ou-pas n° 2

• Le bloc n° 1 reste masqué. (PAS OK)
• Le bloc n° 2 est affiché. (OK)

(pour l'exemple, j'ai remplacé l'id par une classe, puisque j'ai 2 blocs)

N.B. En JavaScript, c'est possible de remonter dans le DOM.

[EDIT] Une ASTUCE possible en CSS :
Utiliser flex / order pour inverser à l'écran la position des div.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="un-selecteur actif">
    un-selecteur
  </div>
  <div class="bloc-a-afficher-ou-pas">
    bloc-a-afficher-ou-pas n° 1
  </div>
  <div class="bloc-a-afficher-ou-pas">
    bloc-a-afficher-ou-pas n° 2
  </div>
</div>

Code css :

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

1
2
3
4
5
6
.wrapper { display:flex; flex-direction:column; }
.wrapper > div { order:1; }
.wrapper > div:nth-child(2) { order:0; }
 
.bloc-a-afficher-ou-pas { display:none; }
.un-selecteur.actif ~ .bloc-a-afficher-ou-pas { display:block; }

Affiche :

bloc-a-afficher-ou-pas n° 1
un-selecteur
bloc-a-afficher-ou-pas n° 2

• Le bloc n° 1 est affiché - AVANT. (OK)
• Le bloc n° 2 est affiché. (OK)