CSS og "repeterende tags"

[Gjest kenneth]

Jeg forsøker å bli klok på CSS, og har i den forbindelse et spørsmål:

Hvorfor forekommer UL flere ganger etter hverandre?

.sidebar ul {

margin: 0;

padding: 0;

list-style-type: none;

}

.sidebar ul ul {

margin: .5em 0 -3px 0;

border-top: 1px solid #dee4da;

}

.sidebar ul ul li {

padding: 0 0 0 0px;

border-bottom: 1px solid #dee4da;

}

.sidebar ul ul li a {

display: block;

margin: 0 0 0 -10px;

padding: 2px 10px 0 10px;

}

.sidebar ul ul li a:hover {

background-color: #f3f3f3;

}

Jeg vet ikke hva dette "fenomenet" heter, og er derfor usikker på hva jeg skal søke på for å finne dokumentasjon.

På forhånd takk

[Temposonic]

Hei!

Jeg kan ikke det tekniske navnet på "fenomenet", men jeg kan prøve så godt jeg kan å forklare det :-)

Jeg antar at du vet hva HTML-taggen ul betyr. Unordered List, punkt-liste.

Hvis en punktliste har flere nivåer, nøstes UL tagger inn i UL tagger. (se kode nederst).

Når det i CSS står UL UL, så gjelder definisjonen for det neste nivå i listen. Med andre ord, dersom du hadde et tredje nivå i listen, må du definere en css-tag: UL UL UL osv.

Sammenlikne CSS med HTML koden nederst.

.sidebar ul {}

Definerer utseendet på selve listen, ikke punktene i seg selv. Dvs.<ul>...</ul> tagger.

.sidebar ul ul {}

Definerer utseendet på undernivåer i listen, ikke punktene i seg selv.

Dvs.

<ul>

<ul>...</ul>

</ul>

.sidebar ul ul li {}

Definerer utseendet på selve punktene i undernivåer.

.sidebar ul ul li a {}

Definerer utseendet på linker som er plassert mellom <li>...</li> tagger.

.sidebar ul ul li a:hover {}

Definerer utseendet på linker som er plassert mellom <li>...</li> tagger., når man beveger musen over dem.

Eks (måtte trikse litt her):

* Element 1

* Element 2

**** Element 2.1

**** Element 2.2

* Element 3

<ul>

<li>Element 1</li>

<li>Element 2

<ul>

<li>Element 2.1</li>

<li>Element 2.2</li>

</ul>

<li>Element 3</li>

</ul>

[Gjest kenneth]

Ah... Sånn å forstå.

Merci, Monsieur jmac!

[Paradokset]

Veldig godt forklart av Jmac.

Om du vil søke på det så heter det "descendant selectors" i css.