Les sélecteurs

Les sélecteurs de base

Les CSS peuvent cibler le code HTML de plusieurs manières. En ciblant les balises ou un de leurs ATTRIBUT (ID, CLASS ou autre), en précisant leur état (:hover lorsqu'un objet est survolé, :active lorsqu'un lien, un bouton ou un formulaire est activé, etc.)

Pour le nom des CLASS et des ID, n'utiliser ni accents, ni espaces, ni ponctuation (sauf _ et - ), et ne jamais commencer par des chiffres !

`*`	Sélecteur universel. Le style s'applique à tout les éléments
`h2`	Sélecteur de balise html. Le style s'applique ici à toutes les balises html `<h2>`
`#unid`	Sélecteur d'ID. Le style s'applique à l'élément dont l'ID est unid
`.uneclass`	Sélecteur de CLASS. Le style s'applique à tous les éléments dont la CLASS est uneclass
`#maclass`	Sélecteur de CLASS. Le style s'applique à tous les éléments dont la CLASS est maclass

Les combinaisons de sélecteurs

`nav#principale` (sans espace)	Le style s'applique à `<nav id="principale">`
`h3.maclass`	Le style s'applique à tous les `<h3 class="maclass">`
`h1, h2, h3`	Le style s'applique à `<h1>` et `<h2>` et `<h3>`
`nav a` (avec espace)	Les `<a>` contenus dans des `<nav>`
`ul + p`	Les `<p>` immédiatement précédés d'un `<ul>`
`p > a`	Les `<a>` enfants directs de `<p>`
`h3 ~ p`	Les `<p>` qui sont frères et qui suivent un `<h3>`, directement ou non

Les sélecteurs de pseudo-classes

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration.

`p:hover`	Quand la souris passe sur un `<p>`
`a:visited`	Un lien qui a été visité
`a:active`	Pendant le clic sur un lien
`ul li:first-child`	Le premier `<li>` de la liste `<ul>`
`nav a:last-child`	Le dernier `<a>` de la `<nav>`
`ul li:nth-child(4)`	Le quatrième `<li>` de la liste `<ul>`
`table tr:nth-child(2n)`	Un `<tr>` sur deux de la `<table>`
`ul li:nth-last-child(2)`	Le second `<li>` avant la fin de la liste `<ul>`
`article:first-of-type`	Les premiers éléments du type `<article>`
`article:nth-of-type(4)`	Les quatrièmes éléments du type `<article>`
`li:last-of-type`	Les derniers éléments du type `<li>`
`li:nth-last-of-type(3)`	Les troisièmes éléments du type `<article>` en commençant par la fin
`p:only-child`	Le `<p>` qui est enfant unique
`:not()` `ul:not(#menu)` `nav a:not(:last-child)`	Négation d'un sélecteur : Les `<ul>` dont l'ID n'est pas #menu Tous les `<a>` qui ne sont pas le dernier de la `<nav>`
`input:enabled`	Champs `<input>` de formulaire actifs
`:disabled`	Eléments de formulaire inactifs
`:checked`	Elément de formulaire coché
`:required`	Eléments de formulaire requis pour la soumission
`:valid`	Eléments de formulaire remplissant les exigences de son type
`:inrequired`	Eléments de formulaire ne remplissant pas les exigences de son type

Les sélecteurs d'attributs

Un attribut vient compléter une balise html. Sa présence peut être requise ou facultative. Dans l'exemple suivant, "title" et "src" sont des attributs : <img title="cheval" src="cheval.jpg">

`img[title]`	Les `<img>` qui possèdent l'attribut `title`
`a[href="#bzzz"]`	Les `<a>` dont l'attribut `href` est #bzzz
`a[href*="bzzz"]`	Les `<a>` dont l'attribut `href` contient bzzz
`img[src$=".png"]`	Les `<img>` dont l'attribut `src` finit par .png
`a[href^="http://"]`	Les `<a>` dont l'attribut `href` commence par http://

Les sélecteurs de pseudo-éléments

Les pseudo-éléments ciblent une certaine partie d'un élément et pas l'élément entier comme une pseudo-classe. Depuis CSS3, on distingue les pseudo-classes des pseudo-éléments par leur écriture : double double-point (::) pour les pseudo-éléments et simple (:) pour les pseudo-classes.

`p.lettrine::first-letter`	La première lettre des `<p class="lettrine">`
`p::first-line`	La première ligne de tous les `<p>`
`div::after {content:"Astuce";}`	Va créer un pseudo-élément, ici le texte "Astuce", à la fin des `<div>`
`nav::before {content:"";display:"block";height="50px";}`	Va créer un pseudo-élément vide d'une hauteur de 50px au début des `<nav>`