.. _reference-selecteur:

Sélecteur (*selector*)
######################

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/Uc2nOyF9XD8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

sélecteur
   une chaîne de caractère permettant la recherche et l’identification dans le document des éléments auxquels les déclarations correspondantes s’appliquent. [#selecteur]_

Il existe différents types de sélecteurs. À titre d’exemple, le sélecteur ``img`` permet de sélectionner tous les éléments ``img``. Les sélecteurs sont traités plus en détail au prochain chapitre.

Exemples
********

Ci-dessous, les sélecteurs ``body`` et ``.menu`` précèdent chacun un bloc de déclarations.

.. code-block:: css
   :emphasize-lines: 1, 5

   body {
      font-family: serif;
   }

   .menu {
      background: white;
   }

.. note::

   Un sélecteur peut aussi comporter des combinateurs comme ci-dessous :

   .. code-block:: css

      /* à éviter en raison de la spécificité */
      body nav {}
      body > nav {}

   Dans la recommandation `Selectors Level 3 <https://www.w3.org/TR/selectors-3/#combinators>`_, les sélecteurs qui composent un sélecteur utilisant un ou des combinateurs sont appelés sélecteurs simples (*simple selectors*). Aucun nom n'est donné par contre aux sélecteurs « composés ».

   .. code-block:: css

      /* sélecteurs simples */
      body {}
      nav {}
      /* sélecteur composé d'un combinateur et de deux sélecteurs simples */
      body > nav {}

.. [#selecteur] “Selector : A search pattern that identifies to what elements the corresponding declaration applies.” – Wium Lie, Håkon. `“Cascading Style Sheets.” <http://www.wiumlie.no/2006/phd/#h-357>`_ Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 29 Mar. 2005. Web. 07 Mar. 2017.