calcul de la spécificité
########################

.. raw:: html

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

.. list-table:: Spécificité des sélecteurs
   :header-rows: 1

   * - spécificité
     - Sélecteurs
   * - 100
     - id
   * - 10
     - classe, attributs, pseudo-classes (sauf ``not``)
   * - 1
     - type, pseudo-éléments
   * - 0
     - sélecteur universel *

On calcul la spécificité d’un sélecteur en additionnant la spécificité de tous les éléments qui le compose.

exemple
*******

.. code-block:: html

   <ul>
     <li>item 1</li>
     <li class="special">item 2</li>
     <li id="exemple" class="special">item 3</li>
   </ul>

.. code-block:: css

   /* spécificité égale à 1 */
   li { color: grey; }

   /* spécificité égale à 10 */
   .special { color: blue; }

   /* spécificité égale à 100 */
   #exemple { color: red; }

   /* spécificité égale à 10 + 1 = 11 */
   li .special { color: orange; }

.. seealso::

   Vous pouvez aussi utiliser `cet outil en ligne <https://specificity.keegan.st/>`_.

   Vous pouvez aussi `lire la section correspondante dans la spécification CSS Selectors level 3 <https://www.w3.org/TR/selectors-3/#specificity>`_. Pour la spécificité dans les éléments styles, voir `CSS Selectors level 2 <https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity>`_.

.. warning::

   Les spécificités sont plus complexes qu'ils n'y parait, ainsi, notez que par exemples, `1000 classes ne suffisent pas à reprendre la priorité sur un seul id <https://jsfiddle.net/csswizardry/0yb7rque/>`_.