Sélecteurs d'éléments CSS

Sélecteurs d'éléments CSS

Les sélecteurs CSS les plus courants sont les sélecteurs d'élément. Autrement dit, les éléments du document sont les sélecteurs de base.

Lorsque vous définissez des styles HTML, le sélecteur est généralement un élément HTML, comme p, h1, em, a, ou même html lui-même :

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Essayez-le vous-même

Il est possible de passer un style d'un élément à un autre.

Supposons que vous décidiez de définir le texte du paragraphe ci-dessus (plutôt que l'élément h1) en gris. Il suffit de changer le sélecteur h1 en p :

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Essayez-le vous-même

Sélecteur de type

Dans les normes W3C, le sélecteur d'élément est également appelé sélecteur de type (type selector).

Le sélecteur de type correspond au nom du type d'élément du document. Le sélecteur de type correspond à chaque instance de ce type dans l'arbre du document.

Les règles suivantes correspondent à tous les éléments h1 du arbre de document :

h1 {font-family: sans-serif;}

Par conséquent, nous pouvons également définir des styles pour les éléments de documents XML :

Document XML :

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Rappel</heading>
<body>Ne oubliez pas la réunion!</body>
</note>

Document CSS :

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

Voir l'effet

À partir des exemples ci-dessus, vous pouvez voir que les sélecteurs d'éléments CSS (sélecteurs de type) peuvent définir les styles des éléments dans un document XML.

Si vous avez besoin de plus de connaissances sur l'ajout de styles aux documents XML, veuillez visiter Tutoriels XML.