.. _reference-selecteur-id:

sélecteur d’id
##############

.. raw:: html

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

Pour sélectionner un élément sur la base de son attribut ``id``, on forme un sélecteur en préfixant ce di d'un signe croisillon (#).

.. warning::

   L’usage des sélecteurs d’id peut être considéré comme une mauvaise pratique [#ref-id]_ notamment en raison de leur forte spécificité. La spécificité est traitée plus loin dans ce cours. Vous ne devez utiliser des sélecteurs d'id que dans des cas spécifiques si cela se justifie.

exemple
*******

Le sélecteur ``#exemple`` sélectionne l’élément ayant l’id ``exemple``.

HTML
====

.. code-block:: html

   <section id="a-eviter">contenu</section>

CSS
===

.. code-block:: css

   #a-eviter {
     color: red;
   }

.. seealso::

   `Voir en ligne un exemple plus complet et commenté <https://codepen.io/martin-leo/pen/QpvzvG?editors=1100>`__


.. [#ref-id] Voir, par exemple, `Harry Roberts, CSS Guidelines, cssguidelin.es. Web 12 Mar. 2017. <http://cssguidelin.es/#ids-in-css>`_ et/ou `Airbnb CSS / Sass Styleguide, github.com. Web 12 Mar. 2017. <https://github.com/airbnb/css#formatting>`_.