Sélecteur universel
Syntaxe *
* {
color: #333;
font-size: 15px;
}
Le sélecteur universel permet de sélectionner tous les éléments d'un document HTML.
A cause de la sélection trop large qu'il fait, ce sélecteur est en réalité peu pratique. Une de ses seules utilisations connues est dans la réinitialisation des marges par défaut faites par les navigateurs sur certains éléments HTML (body, p, ul, etc).
Sélecteur de type
Syntaxe Nom_élément_HTML
section {
padding: 10px;
font-family: arial;
}
Un sélecteur de type sélectionne tous les éléments du document HTML qui ont le même nom que le sélecteur.
L'élément peut être n'importe quel élément HTML et la sélection portera sur tous ceux qui se trouvent dans le document, quelque soit leur niveau d'imbrication.
Sélecteur de classe
Syntaxe .nom_de_classe
.remarque {
border: 1px solid;
font-size: 0.8em;
padding: 10px;
}
Un sélecteur de classe sélectionne tous les éléments du document HTML qui ont un attribut class
dont la valeur contient nom_de_classe.
Ces éléments peuvent être n'importe quel élément HTML, situés à n'importe quel niveau d'imbrication.
La définition du nom de la classe dans le code CSS DOIT être précédé d'un
point (.). Il ne doit pas y avoir
d'espace ou de tabulation entre ce point et le nom de la classe.
Dans le code HTML,
le nom de la classe doit être utilisé SANS le point.
<p class="remarque">C'est une remarque
importante.</p>
Suivant les spécifications du W3C, un nom de classe (ou d'identifiant) peut être constitué des caractères décrits dans le schéma suivant :
Le nom peut commencer éventuellement par un tiret, suivi d'un
caractère alphabétique ou d'un caractère non-ascii (> à U+0079)
ou d'un caractère en hexadecimal ('escape') ou d'un tiret souligné
(underscore).
On aura ensuite autant de caractères alphabétiques ou non-ascii
(> à U+0079) ou en hexadecimal ('escape') ou de tirets ou de
tirets soulignés ou de chiffres que l'on veut.
Par exemple .♥ est un nom de classe
(ou d'identifiant) tout à fait valide, tout comme .\3A
\) ou .☺☃.
Pour être à l'abri de tout problème d'interprétation, je vous conseille de nommer vos classes (ou vos identifiants) toujours en minuscules, sans caractères accentués, de la façon suivante :
- un caractère alphabétique,
- autant de caractères alphabétiques, tirets, tirets soulignés, chiffres que nécessaire.
Une classe peut être affectée à autant d'éléments différents que l'on veut et la même classe peut s'appliquer indiféremment à tout type d'élément.
L'attribut class d'un élément HTML peut contenir
plusieurs noms de classe, séparé par un espace. L'élément aura les
styles cumulés de toutes ces classes.
<p class="remarque rouge important">C'est très
très très utile.</p>
Sélecteur d'identifiant
Syntaxe #nom_identifiant
#moi {
border: 1px solid;
font-size: 0.8em;
padding: 10px;
}
Un sélecteur d'identifiant sélectionne l'élément du document HTML qui a un attribut id
dont la valeur est nom_identifiant.
Cet élément peut être n'importe quel élément HTML, situé à n'importe quel niveau d'imbrication.
La définition du nom de l'identifiant dans le code CSS DOIT être précédé d'un
dièse (#). Il ne doit pas y avoir
d'espace ou de tabulation entre ce diése et le nom de
l'identifiant.
Dans le code HTML,
le nom de l'identifiant doit être utilisé SANS le dièse.
<p id="moi">C'est une remarque
importante.</p>
Un nom d'identifiant obéit aux même règles de grammaire qu'un nom de classe. Voir ci-dessus
Un identifiant DOIT être unique dans un document HTML. Si ce n'est pas le
cas, le sélecteur CSS
sélectionnera tous les éléments avec le même identifiant, mais la
sélection faite par JavaScript sélectionnera uniquement le 1er
élément.
Pour éviter tout problème, je vous conseille de respecter la règle
de la spécification : "an ID attribute can be used to
uniquely identify its element"
