I selettori css
Abbiamo già visto nell’articolo dedicato alle regole dei css cosa siano i selettori: un oggetto a cui è possibile associare valori e proprietà.
Esistono vari tipi di selettori:
- Selettore Universale (Universal Selector)
- Selettore di Elementi (Type Selectors)
- Selettori Discendenti (Descendant Selectors)
- Selettore Figlio (Child Selectors)
- Pseudo-classe :first-child (The :first-child pseudo-class)
- Pseudo-classi dei links (The link pseudo-class)
- Selettori Adiacenti (Adjacent Selectors)
- Selettori di Attributi (Attribute Selectors)
- Selettori di Classi (Class Selectors)
- Selettori di ID (ID Selectors)
- Pseudo-classi :first-line e :first:letter (The :first-line e :first:letter pseudo-class)
Selettore Universale *
Permette di associare a tutti gli elementi della pagina delle regole.
Es:
* {color:black; margin:0; }
Associa a qualsiasi elemento della pagina il colore nero e margine nullo.
Selettore di Elementi
E’ il più diffuso. Permette di associare regole ad uno o più elementi:
h1 { font-style: Georgia, serif; }
h2 { font-style: Georgia, serif; }
h3 { font-style: Georgia, serif; }
h4 { font-style: Georgia, serif; }
h5 { font-style: Georgia, serif; }
h6 { font-style: Georgia, serif; }
C’è la possibilità di associare l’insieme di regole a più elementi separandoli con una virgola:
h1, h2, h3, h4, h5, h6 { font-style: Georgia, serif; }
scrittura equivalente alla precedente.
Selettori Discendenti
Questa opzione ci permette di associare regole a particolari elementi se e solo se contenuti in altri elementi definiti:
div strong { color: red; }
Associa il colore rosso solo agli elementi strong contenuti in div.
<body>
<strong>Questo non sarà rosso in quanto non contenuto in un un div</strong>
<div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
<div>Anche <p><strong>questo testo</strong></p> sarà mostrato in rosso; non è importante che i due elementi siano adiacenti o figli.</div>
</body>
Selettore Figlio
Potrebbe essere una buona soluzione a molti problemi, purtroppo non è supportato, così come il selettore adiacente, da Internet Explorer. Secondo le specifiche permette di associare regole ad elementi solo se contenuti da un altro indicato nel selettore e da nessun altro.
div > strong { color: red; }
Es:
<body>
<div>Il testo successivo, <strong>questo in particolare</strong> sarà mostrato in rosso</div>
<div>Anche <p><strong>questo testo</strong></p> NON sarà mostrato in rosso in quanto tra div e strong c’è un altro elemento, mentre <strong>questo testo</strong> vicecersa lo sarà.</div>
</body>
Pseudo-classe :first-child
Molto simile al selettore figlio, solo che tale regola vale SOLO per il primo figlio, indipendentemente dalla distanza cui è posto dall’altro.
Es:
div > strong:first-child { color: red; }
Pseudo-classi dei links
E’ probabilmente una delle feature più interessanti dei Css: permette di associare ai links (ed anche agli altri elementi, tranne :link e :visited, in teoria; in pratica visto il non supporto di IE solo all’elemento A) regole diverse a seconda se il link non è stato visitato (:link), già seguito (:visited), attivo (:active), al passaggio del mouse (:hover) e se selezionato (:focus).
Es:
a:link { color: blue; }
a:visited { color: purple; }
a:active { color: black; }
a:hover { color: red; }
a:focus { color: green; }
Selettori Adiacenti
Ha la stessa limitazione dei selettori figli: non è supportato da Internet Explorer. Secondo le specifiche permette di associare regole ad elemento solo se contenuto subito dopo l’altro indicato.
div + strong { color: red; }
Es:
<div>
<strong>Questo testo sarà mostrato in rosso</strong> mentre
</div><div>
il prossimo <strong>testo</strong></p> no, in quanto non immediatamente vicino all’elemento div
</div>
Selettori di Attributi
Selettore davvero interessante per i possibili sviluppi verso l’XML ma purtroppo di poca utilità visto che pochissimi browser attualmente non lo supportano. Permette di associare regole diverse all’elemento se dotato di attributi o valori degli stessi.
H1[title] { color: red; }
H1[title="pippo"] { color: green; }
La prima regola associa il colore rosso a tutti gli elementi h1 dotati di title, mentre la seconda regola varrà solo per gli elementi h1 il cui titolo è esattamente pippo. Potrebbe essere molto utile per assegnare valori diversi agli elementi input di un form, per variare lo stile del pulsante submit rispetto ad un campo testo ad esempio; purtroppo ad oggi è conveniente per la stessa operazione assegnare delle classi diverse ai tag.
Selettori di Classi
Permette di assegnare regole a qualunque elemento a cui abbiamo assegnato una classe:
*.nomeclasse { color: red;} o, in forma equivalente
.nomeclasse { color: red;}
E’ possibile ovviamente assegnare regole solo ad uno o più elementi con classe nomeclasse, usando la sintassi:
strong.nomeclasse {color: purple; }
Selettori di ID
Selettore molto simile al precedente con l’ovvia differenza che le regole saranno assegnate solo ad un particolare ID:
#nomeclasse {color: purple; }
Pseudo-classi :first-line e :first:letter
Opzione molto interessante che limita le regole rispettivamente alla prima linea del testo nel primo caso ed alla prima lettera nel secondo per effetti simili a quelli tipografici. Es:
p:first-line { text-transform: uppercase; }
p:first-letter { font-size: 300%; color:red; }
trasforma la prima riga dei paragrafi (p) in maiuscoalo e rende la prima lettera degli stessi 3 volte più grande e di colore rosso.
[…] Le Nostre Guide « I selettori css Sfoghiamoci.com » […]
1 novembre, 2007 - 11:15 pm[Permalink]
[…] E’ possibile associare le stesse regole a più selettori come indicato nel terzo esempio ed applicare regole diverse a seconda della disposizione degli elementi nella pagina, argomento che potrete approfondire nella pagina I selettori. […]
17 luglio, 2008 - 10:30 am[Permalink]