.. _reference-selecteur-classe:

sélecteur de classe
###################

.. raw:: html

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

Pour sélectionner les éléments appartenant à une même classe (possédant une valeur commune associée à l'attribut ``class``), on utilise l’identificateur correspondant à cette classe, préfixé par un point.

exemple
*******

Le sélecteur ``.exemple`` sélectionne tous les éléments de ayant la
classe ``exemple``.

HTML
====

.. code-block:: html

   <section class="exemple">contenu</section>

CSS
===

.. code-block:: css

   .exemple {
     color: red;
   }

.. seealso::

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

.. note::

   Ici l'élément section est sélectionné grâce à l'attribut « exemple » (tout autre élément porteur de ce même attribut sera aussi sélectionné)