Selettore di elemento di CSS

Selettore di elemento di CSS

I selettori CSS più comuni sono i selettori di elemento. In altre parole, gli elementi del documento sono i selettori di base.

Quando si impostano stili HTML, il selettore di solito sarà un elemento HTML, come p, h1, em, a, o persino html stesso:

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

Prova tu stesso

È possibile passare uno stile da un elemento all'altro.

Supponiamo che tu decida di impostare il testo del paragrafo sopra (invece degli elementi h1) in grigio. Basta cambiare il selettore h1 in p:

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

Prova tu stesso

Selettore di tipo

Nello standard W3C, il selettore di elemento è noto anche come selettore di tipo (type selector).

“Il selettore di tipo corrisponde al nome del tipo dell'elemento del documento. Il selettore di tipo corrisponde a ogni istanza del tipo dell'elemento nel albero del documento.”

Le seguenti regole corrispondono a tutti gli elementi h1 nel albero del documento:

h1 {font-family: sans-serif;}

Di conseguenza, possiamo anche impostare stili per gli elementi dei documenti XML:

Documento 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>Promemoria</heading>
<body>Non dimenticare l'incontro!</body>
</note>

Documento 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;
  }

Visualizza l'effetto

Attraverso gli esempi sopra riportati, puoi vedere che i selettori di elementi CSS (selettori di tipo) possono impostare lo stile degli elementi nei documenti XML.

Se hai bisogno di ulteriori informazioni su come aggiungere stili ai documenti XML, visita il sito di CodeW3C Corso XML.