28172 sujets

CSS et mise en forme, CSS3

CSS en fonction d'un texte ?

Bonjour

Je cherche une méthode en css, javascript ou autre pour modifier une couleur de fond en fonction du contenu textuel d'une div.

Ici on aura soit OUVERT, soit FERME de généré dynamiquement par le thème WP, dans la dernière div "lf-head-btn" fille de "lf-head"

<div class="lf-head"> 
<div class="lf-head-btn">blabla</div>
<div class="lf-head-btn">blabla</div>
<div class="lf-head-btn">OUVERT</div>
</div>


Si OUVERT alors il faut que lf-head-btn ait un background "green"
Si FERME alors il faut que lf-head-btn ait un background "red"

De base cette dernière DIV était par défaut en fond vert grâce à :
.lf-head .lf-head-btn:last-child  {
  
    background:green;
  
}


Merci d'avance.
Alors, il faut savoir que c'est tout à fait possible, mais c'est une très mauvaise pratique, pratique que l'on voit pourtant sur beaucoup de sites de développeurs confirmés (expert en accessibilité, blablabla... j'en ai coincé un comme ça avec sa fonction dark theme), voire même de sites professionnels d'envergure :

En effet, que se passera-t-il si un anglophone arrive sur votre page et fait un petit coup de Google translate sur la page ? Réponse : la fonction sera down. Le texte étant traduit, la fonction s'appuyant sur ce texte ne pourra être opérationnelle. CQFD.
Modifié par Olivier C (27 Jan 2023 - 12:39)
Ah oui j'avais pas du tout pensé à ça. Surtout que mon site a vocation à devenir multilingue dans quelques années.

Merci pour la réponse.
Modérateur
Salut,

Si c'est toi qui a codé la portion de wordpress qui génère le texte, tu peux facilement lui faire générer une classe correspondante "ouvert" ou "fermé"
Modérateur
Salut,

D'une manière générale, tu auras un boolean. En fonction de celui ci, tu détermines si c'est ouvert ou fermé. Fais de même pour ta/tes class

@Olivier: j'ai supprimé ton doublon. Smiley smile Aussi, bien vu pour le gg translate.
Prévenir un modérateur
Répondre au sujet
Aller à