Discussion :

[Népomucène]

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 :

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

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 :

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

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 :

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

<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 ?

[NoSmoking]

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 html :

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

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

utilise par exemple

Code :

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

1
2
3
4
5
#monFormulaire span{
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    color: blueviolet;
}

• avec comme code résultant

Code html :

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

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

utilise par exemple

Code :

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

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 :

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

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

[Népomucène]

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

[NoSmoking]

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

[Népomucène]

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

Merci à toi.

[Népomucène]

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

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