/ Code Css [attribut] | Résultat du code Css [attribut] | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code du sélecteur CSS [attribut].

<style type="text/css">
#exemple-attribut-selecteur [type]{ border : 2px solid red }
#exemple-attribut-selecteur [class="widget"]{ border : 2px solid firebrick }
#exemple-attribut-selecteur [class~="wdg-selecteur"]{ 2px solid orangered }
#exemple-attribut-selecteur [class|="wdg"]{  border : 2px solid indigo }
#exemple-attribut-selecteur [class$="wdg-pseudo"]{ border : 2px solid lightslategray}
#exemple-attribut-selecteur [href^="/cours-"]{ border : 2px solid #008A11}
#exemple-attribut-selecteur [class*="ele"]{ border : 2px solid darkolivegreen }

/* présentation */
#exemple-attribut-selecteur > *{display :block; margin-top:5px; }
</style>
<div id="exemple-attribut-selecteur">
<button type="button">Mon bouton</button>
<a href="/cours-css/les-selecteurs-css.html">Les sélecteurs Css</a>
<div class="widget">Widget</div>
<div class="wdg-widget">Widget 2</div>
<div class="widget wdg-widget wdg-selecteur mon-selecteur">Widget sélecteur</div>
<div class="widget wdg-widget wdg-pseudo-classes wdg-pseudo">Widget Pseudo-classes</div>
<div class="widget wdg-widget wdg-pseudo wdg-pseudo-element">Widget Pseudo-element</div>
</div>

Interprétation du code du sélecteur [attribut] CSS par votre navigateur.

Les sélecteurs Css
Widget
Widget 2
Widget sélecteur
Widget Pseudo-classes
Widget Pseudo-element

Interprétation normale du code du sélecteur CSS [attribut] (copie d'écran).

copie d'écran de l'affichage du sélecteur CSS [attribut]