Il existe deux types de sélecteur. Mais avant de parler de chacun d'eux. Je vais vous expliquer ce qu'est un sélecteur et en quoi c'est indispensable.

Nous avons vu depuis le début de ce cours des balises uniques (body, h1, ...) et des balises multiples (img, a, h2, ...).

Or, nous allons voir plus loin dans ce cours que l'on va utiliser une page css pour appliquer des styles à ces balises (mettre de la couleur, positionner sur la page, ...). Et nous allons avoir besoin de différencier de balise identiques mais présente deux fois dans notre page, puisque si ce n'est pas le cas, le style que l'on appliquera sur l'une s'appliquera aussi forcément à l'autre.

Pour pallier à ce problème, il est possible de nommer ces balises par le biais des attributs. Ces attributs sont les sélecteurs.

Le premier sélecteur est le sélecteur id.

Ici, notre balise h2 portera aussi le nom "sous_titre" et lorsqu'on voudra lui appliquer un style, il suffira de préciser qu'on veut appliquer notre style a la balise h2 portant le nom "sous_titre".

Attention le sélecteur id est unique, dans le sens où dans une même page, deux éléments ne peuvent pas posséder le même "id", ceci est donc inccorecte :

Le second sélecteur, lui, n'est pas unique, c'est le sélecteur class.

Il peut donc être associé à plusieurs balises. Contrairement à la balise id, il ne va pas obligatoirement rendre unique l'élément concerné. Il va, en général, le regroupper avec d'autres éléments sur lesquels on va appliquer le même style. Mais il est bien évidemment possible qu'il ne soit pas regrouper et concerne donc un élément devenu unique par son biais.

Il s'utilise de la même façon que le sélecteur précédent.

Cette partie peut vous paraître un peu flou, voir même inutile. Mais vous vous rendrez compte de son utilité lorsque nous commencerons à aborder le CSS.