.. _reference-selecteur-attribut:

sélecteur d’attribut
####################

.. raw:: html

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

Il est possible de sélectionner un élément selon ses attributs. On place
pour cela l’identificateur de l’attribut entre crochets ``[ ]``. Il est
aussi possible, en utilisant différents opérateurs, de restreindre la
sélection en précisant une attente concernant la valeur associée à
l’attribut.

exemples
********

HTML
====

.. code-block:: html

   <a href="#">Je suis un lien</a>

   <a href="http://domain.tld">Je suis un lien</a>

   <a href="monfichier.pdf">Je suis un lien</a>

CSS
===

.. code-block:: css

   [href] { /* tous les éléments avec l'attribut href*/ }

   [href="http://domain.tld"] { /* tous les éléments avec l'attribut href associé à la valeur "http://domain.tld" */ }

   [href$=".pdf"] { /* tous les éléments avec l'attribut href dont la valeur finit par */ }

.. seealso::

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

.. note::

   Ce type de sélecteur `fait partie des moins performants <https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/>`_. Ils sont à réserver à des cas particuliers.

.. seealso::

   Il existe d’autres possibilités qui sont présentées `dans la documentation relative <https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>`_