Stilizzare gli elementi HTML accedendo agli attributi coi CSS

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

In una lezione della guida ai CSS abbiamo visto come impostare stili attraverso la definizione di classi e ID. Possiamo evitare di impostarne e "colpire" gli elementi che ci interessano semplicemente individuando gli attributi che li caratterizzano.

La, che prevede l'utilizzo delle parentesi quadre, sintassi è la seguente:

elemento[attributo]
{
     stile: ...;
}

O anche valorizzando l'attributo in questione:

elemento[attributo="valore"]
{
     stile: ...;
}

Per Internet Explorer, fino alla versione 8, è necessario lavorare in XHTML, mentre per altri browser il funzionamento avviene anche senza la specifica di una !DOCTYPE.

Vediamo dunque un esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div[title]
{
    color: #FF0000;
}
</style>
</head>
<body>

<div>Prima riga...</div>

<div title="Testo alternativo">Seconda riga...</div>

</body>
</html>

Abbiamo individuato tutti i "div" che contengono un attributo "title". Ma possiamo anche individuare degli specifici "title", come segue:

div[title="Testo alternativo"]

In questo modo non tutti i "div" saranno individuati dallo stile, ma solo quelli che contengono uno specifico valore.

Questo sistema è utilissimo per i form, onde individuare ad esempio le caselle di testo piuttosto che i bottoni:

input[type="text"]
{
    background: #EEEEEE;
}
input[type="submit"]
{
    background: #555555;
}

Si provi ad impostare un form per verificare il funzionamento dell'esempio.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.892)

:: Referenze dei fogli di stile Css (41.899)

:: Menu ad effetto mouseover con i Css (39.293)

:: Effetti sui link con i Css (30.280)

:: Testo verticale coi Css (20.096)

:: Angoli smussati in un box coi Css (18.978)

:: Box con effetto ombra con i CSS3 (16.385)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.290)

:: Stilizzare i form Html con i Css (16.102)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.890)

IN EVIDENZA
DOWNLOAD