CSS Basics CSS Selectors_Basic Tutoriel

Exemple :

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none }


2. Sélecteur de type
Syntaxe :

E { sRules }

Description :
Sélecteur de type. Utilisez le type d'objet de langage de document (Element) comme sélecteur.
Exemple :

td { font-size:14px; width:120px; }

a { text-decoration:none; }

3. 🎜>Syntaxe :

E [ attr ] { sRules }

E [ attr = valeur ] { sRules }

E [ attr ~= valeur ] { sRules }

E [ attr |= value ] { sRules }

Description :
Sélecteur d'attribut.
Sélectionnez E avec l'attribut attr
Sélectionnez E avec l'attribut attr et la valeur de l'attribut égale à la valeur
Sélectionnez E avec l'attribut attr et la valeur de l'attribut est une liste de mots séparés par des espaces, dont l'un est égal à la valeur . La valeur ici ne peut pas contenir d'espaces
Sélectionnez l'attribut attr et la valeur de l'attribut est une liste de mots séparés par des traits d'union, commençant par la valeur E
Exemple :

h[titre] { color: blue; }

/* Tous les objets h avec l'attribut title */



span[class=demo] { color: red;
div[speed="fast"][dorun="no"] { couleur : rouge; }



a[rel~="copyright"] { couleur :noir; }

4. Contient le sélecteur
Syntaxe :

E1 E2 { sRules }


Description :
contient le sélecteur. Sélectionne tous les E2 contenus par E1 . Autrement dit, E1.contains(E2)==true.
Exemple :

table td { font-size:14px; }



div.sub a { font-size:14px; >5. Sélecteur de sous-objet
Syntaxe :

E1 > E2 { sRules }

Description :
Sélecteur de sous-objet. Sélectionne tous les E2 qui sont des enfants de E1 .
Exemple :

body > p { font-size:14px; }

/* La taille de police de tous les objets p qui sont des objets enfants de body est de 14px */



div ul>li p { font-size:14px; }

Sélecteur 6.ID
Syntaxe :

#ID { sRules }


Description :
Sélecteur d'ID. Utilisez l'ID comme identifiant unique de l'objet dans l'arborescence des documents (DOM) comme sélecteur.
Exemple :

#note {font-size:14px; width:120px;}

7. Sélecteur de classe
Syntaxe :

E.className { sRules }

Description :
sélecteur de classe. Ce sélecteur peut être utilisé en HTML. Son effet est équivalent à E [ class ~= className ]. Voir Sélecteurs d'attributs.
Dans IE5+, vous pouvez spécifier plusieurs valeurs ( className ) pour l'attribut de classe (propriété) d'un objet en spécifiant un ensemble de noms de classe de feuille de style séparés par des espaces. Par exemple :
.
Exemple :

div.note { font-size:14px; }

/* La taille de la police de tous les objets div dont la valeur de l'attribut de classe est égale à (y compris) "note" est de 14px */

.dream { font-size:14px; }

/* La taille de police de tous les objets dont la valeur d'attribut de classe est égale à (y compris) "note" fait 14px */


8. Regroupement de sélecteurs
Syntaxe :

E1 , E2 , E3 { sRules }

Description :
Regroupement de sélecteurs. Pour appliquer la même définition à plusieurs sélecteurs, vous pouvez combiner les sélecteurs en groupes séparés par des virgules.
Exemple :

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px }

9. Sélecteurs de pseudo-classes et pseudo-objets

Syntaxe :

E : Pseudo-Classes { sRules }

E : Pseudo-Éléments { sRules }

Description :
Pseudo-classe et sélecteur de pseudo-objet.
Sélecteur de pseudo-classe. Voir Pseudo-Classes[:link :hover :active :visited :focus :first-child :first :left :right :lang].
Sélecteur de pseudo-objets. Voir Pseudo-éléments[:first-letter:first-line:before:after].
Exemple :

div:first-letter { font-size:14px; }

a.fly:hover { font-size:14px;