1. Introduction

2. Sélecteurs de base

A. Apprendre en s’amusant

B. Base

<aside> ☝

J’utilise le tag div à titre d’exemple. Ça fonctionne avec n’importe quel tag.

</aside>

Sélecteur	Exemple	Fonction
`div`	`<div>`contenu`</div>`	Tous les blocs `<div>` de votre document.
`#identificateur`	`<div id="identificateur>`contenu`</div>`	L’élément avec l’ID `#identificateur`.
`.classe`	`<div class="classe">`contenu`</div>`
`<p class="classe">`contenu`</p>`	Tous les éléments ayant la classe `.classe`
`div.class`	`<div class="classe">`contenu`</div>`	Toutes les `div` ayant la classe `.classe`
`*`	`<div>`contenu`</div>`
`<a>`contenu`</a>`
`<p>`contenu`</p>`	Tous les tags du document.

B. Relations

Sélecteur	Exemple	Fonction
`div p`	`<div>
<p>`contenu`</p>
</div>`	Tous les blocs `<p>` à l’intérieur des blocs `div` de votre document.
`div > a`	`<div>
<a>`ça marche`</a>
<p>

<a>`ça ne marche pas`</a>

C. Pseudo classes

Il y a beaucoup de pseudo-classes pratiques, mais mieux vaut regarder directement la liste ou chercher, au cas par cas, sur internet (ex: “select first child element CSS”).

Sélecteur	Exemple	Fonction
`div:hover`	`<div>`contenu`</div>`	Élements `<div>` survolés

3. Faire une déclaration

Syntaxe

qui { 
	quoi: comment;
}

Exemple

div {
	color: red;
	font-weight: bold;
}