Je définis dynamiquement une classe de style en fonction de la valeur de statut telle que:

<h:outputText value="#{item.status}" styleClass="#{item.status}"/>

Et quelques exemples rendus:

<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>

La valeur est dans une base de données que je ne contrôle pas. Comment puis-je faire les styles CSS pour les cibler? Même si les deux derniers ont un espace et une virgule, ce sont tous des classes vraiment uniques.

C'est ce que j'ai qui fonctionne, mais est-ce que cela fonctionne par hasard ou est-ce la bonne façon?

Pour Expired ou Incomplete je veux du rouge:

.Expired, .Incomplete {
    color: white;
    background-color: red;
}

Pour un Expiring Soon je veux du jaune

.Expiring, .Soon {
    color: black;
    background-color: yellow;
}

Un Incomplete, Overdue:

.Incomplete, .Overdue {
    color: white;
    background-color: red;
}
3
jeff 21 avril 2017 à 17:08

3 réponses

Meilleure réponse

C'est ce que j'ai qui fonctionne mais est-ce que cela fonctionne par hasard ou est-ce la bonne façon?

Vos exemples ne fonctionnent que car dans ces exemples spécifiques, CSS gère votre classe unique comme deux classes distinctes. Surtout celui-ci:

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

.Incomplete, .Overdue {
    color: white;
    background-color: red;
}

Fonctionne uniquement à cause de .Overdue. Pour utiliser des virgules et des espaces dans les noms de classe, vous devez le faire comme ceci:

[class="Incomplete, Overdue"] {
  color: white;
  background-color: red;
}
<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>

Ce qui précède est appelé sélecteur d'attribut.


Il est également possible d'échapper à certains caractères comme la virgule dans CSS (.Incomplete\, { ... }). Pour ce qui est des espaces, vous pouvez simplement combiner cela avec le concept de regroupement des sélecteurs CSS. En fait, il y a deux sélecteurs dans le HTML .Inclomplete, et .Overdue mais avec le CSS suivant, nous pouvons dire que seule la combinaison des deux ( avec un espace entre ) devrait être sélectionné (qui se comporterait alors comme une classe unique ):

.Incomplete\,.Overdue {
  color: white;
  background-color: red;
}
<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
<span class="Overdue">Overdue</span>
2
Marvin 21 avril 2017 à 14:40

Si vous ne pouvez pas changer le HTML, vous pouvez cibler comme ça ...

.Expired,
.Incomplete {
  color: white;
  background-color: red;
}

.Expiring.Soon {
  color: black;
  background-color: yellow;
}

.Overdue {
  color: white;
  background-color: blue;
}
<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
0
Peter Mortensen 22 avril 2017 à 02:52

Pour expiré ou incomplet, je veux du rouge

.Expired, .Incomplete {
    color: white;
    background-color: red;
}

C'est exact: OR

Un expirant bientôt je veux du jaune

.Expiring, .Soon {
   color: black;
   background-color: yellow; }

Ici, vous devez utiliser AND, ce qui signifie pas de virgule, pas d'espace blanc:

.Expiring.Soon {
   color: black;
   background-color: yellow;
}

(Sinon, chaque entrée qui est SOIT .Expiring OU .Soon sera jaune.)

Le comma invalide dans le HTML (les classes CSS sont séparées par des espaces) - je ne sais pas si cela a un impact. Cela peut dépendre du navigateur, qu'il analyse cela en deux classes (Incomplete et Overdue) ou même en deux classes dont une contenant une virgule: (Incomplete, et Overdue )


J'ai fait quelques tests rapides sur le Comma. Il semble que le navigateur (Internet Explorer, Chrome et Firefox) ignore les classes qui contiennent un , dans le balisage HTML.

Cela signifie, votre dernier exemple

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

Est juste rendu comme

<span class="Overdue">Incomplete, Overdue</span>
.test1 {
  background-color:red;
}

.test2 {
  border:2px solid blue;
}
<div class="test1, test2">
  with comma after test1
</div>

<div class="test1 test2,">
  with comma after test2
</div>

<div class="test1,test2">
  with comma no whitespace
</div>

<div class="test1 , test2">
  with comma double whitespace
</div>
1
Peter Mortensen 22 avril 2017 à 02:54