Globale linker

CSS

Dokumenttre

Alle HTML-dokumenter er bygget opp omtrent som et tre. Hvert nivå på treet kan sammenlignes med et famliietre, med stamforeldre, etterkommere, foreldre, barn og søsken. CSS regler er basert på dette dokumenttreet. Hvis du skjønner dokumenttrekonseptet, så vil CSS-selektorer være enkelt å forstå og beherske.

La oss starte med litt HTML. Dette eksemplet inneholder ikke head eller title, ettersom vi vil fokusere på det som er inne i body:

<body>

				<div id="innhold">

				<h1>Overskrift skal her </h1>

				<p>Lorem ipsum dolor sit amet.</p>

				<p>Lorem ipsum dolor <em>sit</em> amet.</p>

				<hr>

				</div>

				<div id="nav">

				<ul>

				<li>Listeelement 1</li>

				<li>Listeelement 2 </li>

				<li>Listeelement 3 </li>

				</ul>

				</div>

				</body>

Et dokumenttrediagram over HTML-smaksprøven over vil være som følger:

Dokumenttre

Stamforeldre

Med stamfar menes et hvert element som er forbundet, men befinner seg på et høyere nivå i dokumenttreet - uansett hvor mange nivåer oppover. I bildet under er <body>-elementet stamfaren til alle andre elementer på siden.

Dokumenttre som viser stamfar

Etterkommere

En etterkommer refererer til et element som er forbundet, men lavere ned i dokumenttreet - uansett hvor mange nivåer under. I bildet under er alle elementer som befinner seg under den høyre div-taggen dens etterkommere.

Dokumenttre som viser etterkommere

Foreldre

En foreldre er et element som er rett over og direkte knyttet til et element i dokumentet. I bildet under er det <div> som er foreldren til <ul>.

Dokumenttre som viser forldre - barn

Barn

Et barn er et element som er direkte under og forbundet med et annet element på siden. I bildet over er <ul> et barn av <div>.

Søsken

Et søsken er et element som deler den samme foreldren med et annet element. I bildet under er alle <li>-taggen søsken, ettersom de alle har samme foreldre - <ul>-taggen.

Dokumenttre som viser søsken

Flere relasjoner innen dokumentet

Innen ditt eget familitre, kan du beskrives på flere forskjellige måter. Du er etterkommer etter dine forfedre og et barn av din foreldre. Du er også kanskje selv en forelder (hvis du har barn) og et søsken (hvis du har en bror eller søster).

På akkurat samme måte kan også elementer i et HTML-dokument ha flere beskrivelser. I bildet under er det ene div-elementet uthevet, og det kan beskrives som:

Et barn av <body>-elementet
En foreldre til <ul>-elementet
En stamfar for <li>-elementene
Et søsken til det andre <div>-elementet (som deler den samme foreldren - <body>-elementet.

Dokumenttre

Gå til neste side hvor vi ser på hvordan vi velger oss elementer vi vil formattere og CSS-syntaksen.