Cours CSS les sélecteurs

Cours CSS les sélecteurs, tutoriel & guide de travaux pratiques en pdf.

CSS : Sélecteurs

✦ Pattern : élément élément (sélecteur descendant)
● tous les éléments (en 2ième) contenus dans des éléments (en 1er) apparaissent avec le style défini entre { } ● Ex: ◆ p span {color: red ; background-color: orange;}
◆ Tous les span dans des p sont écrit en rouge sur fond orange
✦ Pattern : élément.classname (sélecteur de classe)
● tous les éléments « éléments » dont la class (attribut) est spécifiée à « classname » » apparaissent avec le style défini entre { }
● Ex :
◆ p.special {color: white ; background-color: black;}
◆ Les paragraphes de class « special » sont écrits en blanc sur fond noir
✦ Pattern .classname (sélecteur de classe)
● tous les éléments dont la class est spécifiée à « classname » apparaissent avec le style défini entre { }
● Ex : ◆ .special2 {color: white ; background-color: black;}
◆ Les éléments de class « special2 » sont écrits en blanc sur fond noir
✦ exemple-cours5/selecteurs2.html
✦ Pattern : #id (sélecteur d’id)
● L’élément dont l’id (attribut, unique) est spécifiée à « id » apparait avec le style défini entre { }
● Ex :
◆ #special {background-color:#ffffef; border:blue 2px solid;}
◆ L’élément définit avec id= »id » apparaît sur un fond légèrement jaune et encadré en bleu
✦ Pattern élément > élément (sélecteur d’enfant)
● tous les éléments (en 2ième) contenus dans des éléments (en 1er) apparaissent avec le style défini entre { }
● Ex :
◆ p > span {background-color:#ffefff; border: green 2px solid;}
◆ Tout span définit dans un p apparaît sur un fond légèrement violet et encadré en vert
✦ Pattern élément + élément (sélecteur d’enfant adjacent)
● Chaque élément (en 2ième) immédiatement après l’élément (en 1er) apparaît avec le style défini entre {} : les deux éléments ont le même parent
● Ex :
◆ p + ul {background-color:#efffff; border-color:red; border-width:2; border-style: solid;}
◆ Tout ul défini juste après un p apparaît sur un fond légèrement cyan et encadré en rouge
✦ exemple-cours5/selecteurs3.html
✦ Pattern : élément[attribut] (sélecteurs d’attribut)
● Chaque élément p qui a un attribut id (quelque soit la valeur de l’attribut apparait avec le style défini entre {}
● Ex :
◆ p[id]{color: white ; background-color: black;}
◆ Chaque p qui a un id est écrit en blanc sur fond noir
✦ Notez qu’il est possible de restreindre le style :
✦ Pattern : élément [att= »value »]
● le style ne vaut que quand l’attribut att a la valeur précise « value »
✦ Pattern : élément [att~= »value »] :
● le style ne vaut que quand la valeur de l’attribut att contient « value »
✦ exemple-cours5/selecteurs4.html