Sous identifiant CSS inaccessible

Bonjour, dans ma page xhtml (fait par JSF) j'ai :
- un formulaire ayant pour id="monFormulaire"
- un paragraphe (à l'intérieure du formulaire) ayant pour id="monElement"

Code:

---

1 2 3 4 5 6 7

<h:body> <f:view> <h:form id="monFormulaire"> <p><h:outputText value="Un peu de couleur bleue/violette" id="monElement"/></p> </h:form> </f:view> </h:body>

---

et la CSS

Code:

---

1 2 3 4 5

#monElement { font-family: Tahoma, sans-serif; font-weight: bold; color: blueviolet; }

---

Le style n'est pas appliqué à "monElement".
Je suppose que cela est du à ce qu'au run-time je vois qu'à la place de id="monElement" j'ai id="monFormulaire:monElement"

Code:

---

<p><span id="monFormulaire:monElement">Un peu de couleur bleue/violette</span></p>

---

J'ai essayé de mettre dans la CSS divers types d'identifiants : "#monFormulaire#monElement" ou "#monFormulaire:monElement"
mais rien ne marche car je sais pas comment identifier un "sous-élément" dans un formulaire.

Quelqu'un aurait-il une idée ?

Bonjour,
tu ne peux pas utiliser les : dans un identifiant, il te faut donc passer par un sélecteur enfant ou une classe
• avec comme code résultant

Code:

---

<p><span>Un peu de couleur bleue/violette</span></p>

---

utilise par exemple

Code:

---

1 2 3 4 5

#monFormulaire span{ font-family: Tahoma, sans-serif; font-weight: bold; color: blueviolet; }

---

• avec comme code résultant

Code:

---

<p><span class="blueviolet">Un peu de couleur bleue/violette</span></p>

---

utilise par exemple

Code:

---

1 2 3 4 5

.blueviolet{ font-family: Tahoma, sans-serif; font-weight: bold; color: blueviolet; }

---

• J'ai failli oublié, sélection avec l'ID qui fini par monElement

Code:

---

1 2 3 4 5

[id$="monElement"]{ font-family: Tahoma, sans-serif; font-weight: bold; color: blueviolet; }

---

Ah d'accord.

Donc dans mon cas, comme c'est JSF qui génère la page xhtml et spécifie un id="monformulaire:monelement", je n'ai aucune chance d'utiliser le #monelement dans ma CSS.

Bon, je ne vais pas chipoter, j'utiliserai une classe

Citation:

---

Bon, je ne vais pas chipoter, j'utiliserai une classe

---

je ne sais pas si tu as vu la 3^éme proposition, éditée un peu tard j'ai eu une crampe :mouarf:

Je n'avais pas vu ...
J'essaye et je te tiens au courant.

Merci à toi.

@NoSmoking ta solution n° 3 de prendre la fin de l'identifiant fonctionne parfaitement. :ccool:

C'est une solution de contournement, mais je suppose que ce genre de problème arrive quand les pages sont générées automatiquement.
En tout cas ça marche.

Merci