Introduzione ai CSS - Le pseudo classi strutturali
Monday 7 July 2008 Marco Bertoni, ultimo aggiornamento: Monday 7 July 2008.
Il supporto del linguaggio CSS nei vari browser sta nettamente migliorando. Ecco perché è forse il momento giusto per dare una timida occhiata a CSS 3.
Se non ricordi cosa sono le pseudo classi puoi dare una ripassata all'articolo Introduzione ai CSS - I selettori.
Fino ad ora abbiamo definito CSS come il linguaggio con il quale impostare le regole di presentazione di un documento (X)HTML. Nel linguaggio HTML i marcatori sono predefiniti. Questo significa, per esempio, che l'elemento radice (root) è sempre <html>.
Se avessimo a che fare con un documento XML, al contrario, potremmo non conoscere i nomi dei marcatori che desideriamo influenzare. Per creare una regola che influenzasse l'elemento radice del documento, indipendentemente dal nome, come potremmo fare?
I cervelloni del CSS Working Group ci hanno pensato, regalandoci una manciata di selettori che applicano lo stile basandosi sulla struttura del documento. Ne vedremo solo alcuni, per approfondire consiglio di leggere l'apposita sezione del modulo CSS3 Selectors.
:root- Eccolo è lui. L'elemento radice. Una regola come la seguente
:root { background: #ccc; }influenzerà l'elemento radice del linguaggio di marcatura. Se il documento è HTML il bersaglio sarà ovviamente<html>. Se il documento è XML il bersaglio sarà il nome dell'elemento radice. Questo selettore è supportato da Opera 9.51 e Firefox 3. IE 7? No. :first-child- Questo selettore influenza il primo figlio di un elemento (non ricordi le parentele? Rileggi l'articolo Introduzione ai CSS - Le relazioni tra gli elementi). Per esempio, secondo voi una regola come la seguente:
p:first-child { font-weight: bold; }colpirà il paragrafo primo figlio di quale elemento?1 Questo selettore è supportato da Opera, Firefox e anche IE 7 (anche se IE 7 fallisce se prima del primo figlio c'è un commento HTML). :last-child- Il contrario del selettore precedente. Influenza l'ultimo figlio di un elemento. Supportato da Opera e Firefox. IE 7 lo supporta negli anni bisestili ma solo se c'è alta marea e il pc è orientato verso La Mecca (cioè se non ci sono elementi diversi prima dell'ultimo figlio, se non c'è testo, se dopo non c'è un commento ecc.).
:empty- Questo è fantastico. Colpisce gli elementi vuoti. Una regola come la seguente:
p:empty { display: none; }sarebbe davvero utile per ridurre (almeno visivamente) i danni di CMS e redattori che inseriscono paragrafi vuoti nei documenti come se piovesse.
Per finire ecco una pseudo classe strutturale che uso nel CSS di questo sito, supportata bene solo da Opera2:
- #contenuto-principale div:nth-child(5) {
- border-bottom: none;
- }
Questo selettore annulla il bordo inferiore del quinto div discendente dell'ID #contenuto-principale.
In merito a CSS3 David Baron in un suo articolo fa ben sperare gli amanti di Firefox:
I landed support for a few new CSS selectors yesterday. They're in today's new mozilla-central nightly build (destined for the Firefox release that might be called 3.1). We now support :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() (see bug report) and :first-of-type, :last-of-type, and :only-of-type (see bug report). I think this means we support all of css3-selectors except for ::selection (although we have a buggy ::-moz-selection implementation).
Note
- Credevi fosse la risposta eh? Invece no! :P [indietro]
- Noterete che funziona anche con IE 7 e precedenti ma c'è il barbatrucco: la libreria IE7 di Dean Edwards, geniale soluzione per smetterla di preoccuparsi di quella ciofeca di IE. [indietro]
Wednesday 16 July 2008 9:03
Di ogni primo paragrafo contenuto in un elemento… giusto??
Ma Bertoni dovevi fare il comico:
Wednesday 16 July 2008 12:38
Ciao Chiara. Ebbene si: due braccia tolte al cabaret le mie :)
Hai vinto un aperitivo a Genova! Se capiti batti un colpo :D