Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.

In CSS i selettori di attributo assegnano le regole di stile ad un oggetto HTML in base al valore di un attributo.

Ad esempio vediamo il codice:

<!DOCTYPE html>
<html>

<head>
<title>Titolo del documento</title>

<style type="text/css"> 
p[lang] { 
  font-size: 20px;
  color: red;
}
</style>

</head>

<body>
<p lang="it">Testo in italiano</p><br>
<p lang="eg">English Text</p><br>
<p>Nessun attributo</p>
</body>

</html>

Il risultato qui sotto:

Testo in italiano

English Text

Nessun attributo

Dal codice si evince che:

p[lang] { regola css }

Applica la regola css a tutti i tag p con attributo lang

<p lang="it">Testo in italiano</p>

Il selettore può essere più restrittivo, specificando anche il valore dell’attributo come nell’esempio sottostante:

<!DOCTYPE html>
<html>

<head>
<title>Titolo del documento</title>

<style type="text/css"> 
p[lang="en"] { 
  font-size: 20px;
  color: red;
}
</style>

</head>

<body>
<p lang="it">Testo in italiano</p><br>
<p lang="en">English Text</p><br>
<p>Nessun attributo</p>
</body>

</html>

Il risultato sarà il seguente, cioè l’applicazione della regola solamente all’attributo con valore lang=”en”:

Testo in italiano

English Text

Nessun attributo

Il mio sito ufficiale>