Introduzione ai CSS - Le relazioni tra gli elementi
Wednesday 10 October 2007 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
La sequenza dei marcatori presenti in un documento HTML può essere rappresentata in una struttura ad albero che ne evidenzia le relazioni.
Consideriamo il seguente esempio di documento HTML:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>Titolo della pagina</title>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
- </head>
- <body>
- <h1>Un titolo di primo livello</h1>
- <p>Un paragrafo con testo <strong>grassetto</strong>.</p>
- </body>
- </html>
Gli elementi si posizionano tutti in ramificazioni gerarchiche ad eccezione di HTML che è l'elemento radice. Nell'esempio h1 e p sono fratelli, p è genitore di strong, title è figlio di head e così via. L'elemento html è l'unico sprovvisto di genitori. Questa metafora "famigliare" è il modo con il quale si definiscono le relazioni tra gli elementi nell'albero:
- Genitore. E' l'elemento che immediatamente precede uno o più altri elementi nella gerarchia dell'albero del documento.
- Figlio. E' l'elemento, o gli elementi, che seguono immediatamente un altro nella gerarchia dell'albero del documento.
- Discendente. E' un elemento che ne segue un altro, nella gerarchia dell'albero degli elementi del documento, indipendentemente dal livello di profondità.
- Antenato. E' un elemento che ne precede un altro, nella gerarchia dell'albero degli elementi del documento, indipendentemente dal livello di precedenza.
- Fratello. Due o più elementi che condividono il genitore. L'elemento A è fratello precedente se compare prima di B nell'albero degli elementi. L'elemento B è fratello seguente se compare dopo A nell'albero degli elementi. Il termine fratello adiacente si riferisce a un elemento che ne segue immediatamente un altro con il quale condivide il genitore.
- Elemento precedente. Un elemento A è chiamato elemento precedente di un elemento B se, e solo se, (1) A è antenato di B o (2) A è fratello precedente di B.
- Elemento seguente. Un elemento A è chiamato elemento seguente di un elemento B se, e solo se, B è un elemento precedente di A.
E' importante familiarizzare con questa terminologia perché ci servirà per comprendere alcuni concetti legati ai fogli di stile (come per esempio l'ereditarietà) oltre ad essere utilizzata nella definizione di alcune tipologie di selettori CSS.
