1
votes

Comment appliquer le CSS en utilisant une condition?

J'essaie d'appliquer ce css:

#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
    font-size: 22px;
    color: white;
}

cela fonctionne bien, le problème est que l'application Web peut définir une classe sur le body appelé white-content , si la classe white-content est définie, alors je ne peux pas voir le texte de h2 , car la couleur est white .

Il est possible d'indiquer au css que le css ci-dessus doit être appliqué uniquement lorsque la classe white-content n'est pas disponible sur body code>?

Merci d'avance.

css css-selectors

5 commentaires

utiliser le sélecteur not ()

.white-content # calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {color: black;}

@sol le h2 est déjà noir .. J'ai besoin de mettre le blanc, j'ai essayé: # calendar-page #calendar .fc-toolbar.fc-header-toolbar h2: not (.white-content) mais pas de chance

@sfarzoso Vous pouvez utiliser les deux règles. Le code que vous avez publié le met en blanc. Le code dans mon commentaire le met en noir lorsque white-content est sur le corps.

@sfarzoso TemaniAfif signifie utiliser body: not (.white-content) # calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 pour un sélecteur.

3 Réponses :

-3
votes

oui c'est possible en utilisant la manipulation DOM avec javascript:

html:

if(div01.style.backgroundColor == "white")
    {document.getElementById("div01").style.color = "black";}

javascript:

<div id="div01" style="background-color: white">abc</div>

p >

0 commentaires

1
votes

J'ai condensé le HTML pour cet exemple.

Test 1: La classe existe sur body . Le texte h2 doit être noir par défaut.

<body>
  <div id="calendar-page">
    <h2>My Header</h2>
  </div>
</body>

body:not(.white-content) #calendar-page h2 {
  font-size: 22px;
  color: white;
}

Test 2: La classe n'existe pas sur le body . Le texte h2 doit être blanc.

<body class="white-content">
  <div id="calendar-page">
    <h2>My Header</h2>
  </div>
</body>

body:not(.white-content) #calendar-page h2 {
  font-size: 22px;
  color: white;
}

0 commentaires

1
votes

si vous utilisez

#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
   font-size: 22px;
   color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
   color: black
}

, cela signifie à la fois classe "corps et contenu blanc". Vous pouvez donc utiliser:

body.white-content

Ainsi, lorsque le corps a un contenu .white, il ajoute cette règle css.

En savoir plus sur https://www.w3schools.com/cssref/css_selectors.asp p >

0 commentaires