Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

définition des class et des Id

11 réponses
Avatar
WebShaker
salut,

quelqu'un sait-il (ou peut-il me dire ou trouver)
quelles sont les règle de définition des class et des ID !

Sont-ils casa sensitive
quels sont les caractères que l'on a le droit d'utiliser dans une class
et un ID !

Merci
Etienne

10 réponses

1 2
Avatar
Sergio
Le 01/11/2010 15:47, WebShaker a écrit :
salut,

quelqu'un sait-il (ou peut-il me dire ou trouver)
quelles sont les règle de définition des class et des ID !

Sont-ils casa sensitive



Oui.

quels sont les caractères que l'on a le droit d'utiliser dans une class et un ID !



http://www.w3.org/TR/html401/types.html#h-6.2 :
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")."

Donc une lettre (A-Za-z] suivie de lettres, chiffres, et "-_:."

Et d'après http://www.yoyodesign.org/doc/w3c/css2/syndata.html#q4 (doc CSS) :

"Toutes les feuilles de style CSS sont insensibles à la casse, sauf leurs parties qui ne sont pas régies par CSS. Ainsi celles qui
sont sensibles à la casse, comme les valeurs des attributs de HTML "id" et "class", les noms des polices et les adresses URI qui
sont hors du cadre de cette spécification. Noter en particulier que les noms des éléments ne sont pas dépendants de la casse pour
HTML, alors qu'en XML ils le sont."

Donc en HTML ou XHTML la sensibilité à la casse est différente (histoire de bien faire chier le monde).

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
WebShaker
Le 01/11/2010 16:45, Sergio a écrit :
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")."

Donc une lettre (A-Za-z] suivie de lettres, chiffres, et "-_:."



Et pour les class?

parce que si j'ai le div suivant
<div class='toto.data'>

la feuille de style
div.toto.data {...}

est normalement sensée faire référence au div qui aurait les deux class
toto et data...

c'est chaud là !

"Toutes les feuilles de style CSS sont insensibles à la casse, sauf
leurs parties qui ne sont pas régies par CSS. Ainsi celles qui sont
sensibles à la casse, comme les valeurs des attributs de HTML "id" et
"class", les noms des polices et les adresses URI qui sont hors du cadre
de cette spécification. Noter en particulier que les noms des éléments
ne sont pas dépendants de la casse pour HTML, alors qu'en XML ils le sont."



Heu si je comprends bien, cela veut dire que dans les css,
les tag et les attributs sont insensibles à la case alors que les class
et les ID ainsi que la valeur des attributs le sont !

C'est ca.

Etienne
Avatar
Y.D.
Le 01/11/2010 21:29, WebShaker a écrit :
[...]
Et pour les class?

parce que si j'ai le div suivant
<div class='toto.data'>

la feuille de style
div.toto.data {...}



Ne marche pas. Préférer, pour signifier que le point appartient au nom de la
classe :
DIV[class~="toto.data"] {...}
(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).

--
Y.D.
Avatar
Etienne
Le 02/11/2010 11:50, Y.D. a écrit :
Ne marche pas. Préférer, pour signifier que le point appartient au nom
de la classe :



C'est à dire ne marche pas ?
C'est une spécification de la norme qui n'est pas gérée par les
navigateurs, ou bien c'est pas du tout dans la norme.

Bon ceci dit, je me demande qui peut bien utiliser un . dans le nom
d'une class mais bon.

DIV[class~="toto.data"] {...}
(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).



sympa ce site.
C'est une sorte de traduction de la norme w3c ?

Etienne
Avatar
Sergio
Le 03/11/2010 08:51, Etienne a écrit :

DIV[class~="toto.data"] {...}
(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).



sympa ce site.
C'est une sorte de traduction de la norme w3c ?



Oui. Cf :
http://www.yoyodesign.org/doc/w3c/preface.php?id=css2

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Y.D.
Le 03/11/2010 08:51, Etienne a écrit :
Le 02/11/2010 11:50, Y.D. a écrit :
Ne marche pas. Préférer, pour signifier que le point appartient au nom
de la classe :



C'est à dire ne marche pas ?



Ne produit pas l'effet souhaité, désigner une div de classe "toto.data". Puisque
div.toto.data désigne, comme tu l'as noté, une div qui possède au moins les deux
classes toto et data.

Bon ceci dit, je me demande qui peut bien utiliser un . dans le nom d'une class
mais bon.



Les classes ne sont pas censées servir exclusivement pour les css... Le fait que
le point et les deux points puissent servir dans les noms des classes (ou des
id) doit bien trouver des échos avec les syntaxes de langages orientés objets.

(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).



sympa ce site.
C'est une sorte de traduction de la norme w3c ?



C'est une traduction en français, comme l'a déjà écrit Sergio, mais non
normative (seule la version originale en anglais et en HTML...).

--
Y.D.
Avatar
Etienne
Le 02/11/2010 11:50, Y.D. a écrit :
(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).



En lisant cette page je suis tombé sur quelques trucs étranges !
Alors certes je pense que les css ne s'appliquent pas uniquement au page
web, mais pour être bien sur :

MATH + P { text-indent: 0 }

on est bien d'accord qu'en HTML il n'y a pas de balise MATH et que donc
ce style ne serait pas utilisé !

SPAN[bonjour="soleil"][adieu="nuages"] { color: blue; }

On est la aussi d'accord qu'on ne peut pas spécifier (en HTML) un
attribut d'une balise autre que les attributs définis par le standard!

Me trompe-je?
Etienne
Avatar
Etienne
Le 02/11/2010 11:50, Y.D. a écrit :
J'ai lu dans cette documentation que l'ordre de déclaration est le suivant:
1- Sélecteurs de type (les balises)
2- Sélecteurs d'attributs ([lang='fr'])
3- Les IDs (#toto)
4- Les speudo class (:hover)

Est-ce que une class (.class) est considérée comme un sélecteur d'attribut ?

donc si j'ai bien compris une telle déclaration est valide

input[lang='fr']#toto:focus

mais est ce que c'est deux la le sont aussi?

input.maclass[lang='fr']#toto:focus
input[lang='fr'].maclass#toto:focus

Etienne
Avatar
Y.D.
Le 04/11/2010 10:00, Etienne a écrit :
Le 02/11/2010 11:50, Y.D. a écrit :
(cf. http://www.yoyodesign.org/doc/w3c/css2/selector.html, §5.8.3).



En lisant cette page je suis tombé sur quelques trucs étranges !
Alors certes je pense que les css ne s'appliquent pas uniquement au page web,



Une réponse là : http://www.yoyodesign.org/doc/w3c/css2/intro.html#q2

mais pour être bien sur

MATH + P { text-indent: 0 }

on est bien d'accord qu'en HTML il n'y a pas de balise MATH et que donc ce style
ne serait pas utilisé !



En HTML non, mais en XHTML avec les déclarations adéquates de namespace... on
peut déclarer une portion de document MathML dans une page web XHTML. Pour un
exemple : http://www.w3.org/TR/XHTMLplusMathMLplusSVG/sample.xhtml

SPAN[bonjour="soleil"][adieu="nuages"] { color: blue; }

On est la aussi d'accord qu'on ne peut pas spécifier (en HTML) un attribut d'une
balise autre que les attributs définis par le standard!



Idem. En HTML non, mais en XHTML...

Me trompe-je?



Non, mais note que si tu essaies de définir un attribut bonjour="soleil" à un
élément SPAN d'un document HTML, la plupart des navigateurs récents
interpréteront correctement le CSS donné (bien que le document ne soit pas
valide par rapport à la DTD).

--
Y.D.
Avatar
Y.D.
Le 04/11/2010 10:49, Etienne a écrit :
J'ai lu dans cette documentation que l'ordre de déclaration est le suivant:
1- Sélecteurs de type (les balises)
2- Sélecteurs d'attributs ([lang='fr'])
3- Les IDs (#toto)
4- Les speudo class (:hover)

Est-ce que une class (.class) est considérée comme un sélecteur d'attribut ?



Oui. C'est une forme abrégée de [class=une_classe] et surtout, je pense, un
moyen d'être compatible avec la norme précédente...

donc si j'ai bien compris une telle déclaration est valide
input[lang='fr']#toto:focus



Oui.

mais est ce que c'est deux la le sont aussi?

input.maclass[lang='fr']#toto:focus
input[lang='fr'].maclass#toto:focus



et aussi

input[lang='fr'][class~=maclass]#toto:focus

Tout ça en CSS 2.1. Pour vérifier la syntaxe d'une expression CSS comme
celles-ci http://jigsaw.w3.org/css-validator/#validate_by_input est parfait (à
condition d'ajouter une règle au sélecteur bien sûr).

--
Y.D.
1 2