Nesting

On se souviens du chapitre sur les selecteurs combinés? Quand je vous disais que pour cet HTML ...

<article>
  <h2>Titre</h2>
  <p>ma description</p>
  <a><button>Visiter</button></a>
</article>

... on pouvait avoir ce CSS?

article {
}

article h2 {
}

article p {
}

article button {
}

Eh bien en fait depuis un petit moment maintenant on peut ecrire ceci, qui est encore mieux

article {
  h2 {
  }

  p {
  }

  button {
  }
}

Pourquoi ne pas vous avoir montre ca directement? Parce que beaucoup de gens ne mettent pas a jour leur CSS (qu'il soit ecrit ou dans leur tete) donc il faut que vous sachiez lire "a l'ancienne".

Mais bon, a partir de maintenant j'estime que vous avez ce qu'il faut pour gerer les boomers du CSS donc je vais arreter de cacher les trucs recents.

&

implicite

// TODO il est partout

// TODO mais c'est surtout a savoir si "mon parent est hover" par exemple

Media queries 2 : le retour

Avant on avait essentiellement une grosse feuille de style qu'on venait ecraser avec des grosses media queries, comme vu precedemment.

// TODO mais en fait!!!! media query locale!