---

Hejsa,

Jeg har et par hypotetiske spørgsmål til noget sammenkædet CSS.
Faktisk har jeg mere end ét spørgsmål.

Jeg har i gennem længere tid forsøgt at forstå fomålet, samtidig
med at se hvor det er en fordel men jeg er stadig meget på
usikker grund og håbede på at I måske kunne slå et par
kendsgerninger eller noget fast, nogle konkrete ting at forholde
sig til evt.

---------------------------------------------------------

Mit hypotetiske CSS ser sådan ud:

#container {
height:100%;
width:750px;
margin:0 auto;
padding:5px;
background:url(img/bg.png) repeat;
}

#container.content {
width:700px;
margin:0 auto;
background-color:#FFFFFF;
}

---------------------------------------------------------

Mine spørgsmål lyder således;

Jeg har en container div, med en anden div indeni. Ved at kalde
den innerste div #container.content kan jeg nøjes med at bruge
"class="content"></div> i det div's underlagt den overordnede
Container div, korrekt?

I tilfælde af spørgsmål ikke er forstået korrekt, er der så en
anden nemmere/anderledes/standard måde at samenkæde disse
selectors på?

Er der nogen grundregler i disse sammenhænge jeg bør være
opmærksomme på?

#container.content selectoren arver #container ID'ets værdier
medmindre andet angives? Rigtigt eller forkert?

*Krydser fingre for ikke at ligne et lallende fjols*
På forhånd tak :)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah forklarede:

> Jeg har en container div, med en anden div indeni. Ved at kalde
> den innerste div #container.content kan jeg nøjes med at bruge
> "class="content"></div> i det div's underlagt den overordnede
> Container div, korrekt?
>
> I tilfælde af spørgsmål ikke er forstået korrekt, er der så en
> anden nemmere/anderledes/standard måde at samenkæde disse
> selectors på?
>
> Er der nogen grundregler i disse sammenhænge jeg bør være
> opmærksomme på?
>
> #container.content selectoren arver #container ID'ets værdier
> medmindre andet angives? Rigtigt eller forkert?
>

Det første er rigtigt.
Der er temmelig mange selectors, og dermed mange måder at angive det
samme på.
http://www.w3.org/TR/CSS21/selector.html

Det andet er ikke rigtigt.
Det er ikke alle egenskaber der nedarves, og nedarvning afhænger af
hvile typer elementer og egenskaber (block, inline, calculated), og
derfor (også) af hvilke tags du anvender, inde i hinanden.
Typisk nedarves font og tekst egenskaber, Men en generel regel, tror
jeg ikke man skal forsøge at sætte sammen. I hvert fald skal den nok
differentiere noget mere end dit forslag.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Jahirah skrev:

> Jeg har et par hypotetiske spørgsmål til noget sammenkædet CSS.
> Faktisk har jeg mere end ét spørgsmål.

Birger har svaret. Jeg har en kommentar.

> Mit hypotetiske CSS ser sådan ud:

Du kan helt undgå at sætte klasse på den inderste div hvis du
vil:

#container {
height:100%;
width:750px;
margin:0 auto;
padding:5px;
background:url(img/bg.png) repeat;
}

#container div {
width:700px;
margin:0 auto;
background-color:#FFFFFF;
}

Ikke fordi der er nogen speciel fordel ved det - det kommer an på
hvad der er mest praktisk, men det er et fif du kan benytte.

Det vil style *alle* divs som ligger inden i containeren. Med din
metode fik du kun én stylet og kunne for den sags skyld have
andre som var stylet anderledes.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:
> Jahirah skrev:
>
> > Jeg har et par hypotetiske spørgsmål til noget sammenkædet CSS.
> > Faktisk har jeg mere end ét spørgsmål.
>
> Birger har svaret. Jeg har en kommentar.
>
> > Mit hypotetiske CSS ser sådan ud:
>
> Du kan helt undgå at sætte klasse på den inderste div hvis du
> vil:
>
> #container {
> height:100%;
> width:750px;
> margin:0 auto;
> padding:5px;
> background:url(img/bg.png) repeat;
> }
>
> #container div {
> width:700px;
> margin:0 auto;
> background-color:#FFFFFF;
> }
>
> Ikke fordi der er nogen speciel fordel ved det - det kommer an på
> hvad der er mest praktisk, men det er et fif du kan benytte.
>
> Det vil style *alle* divs som ligger inden i containeren. Med din
> metode fik du kun én stylet og kunne for den sags skyld have
> andre som var stylet anderledes.

-----------------------------------------------------

Birger og Bertel,

Tusind tak for jeres svar! De kastede lidt mere lys på et område som
jeg af uransagelige grunde finder dybt forvirrende ;P

@Birger
Jeg fulgte dit link til W3C's hjemmeside og forsøgte at læse lidt
omkring det hele. Der er dog én ting jeg savner demonstreret, nemlig
det specifikke som udgør mit problem.

Jeg er klar over, at man kan sammenkode alle de selectorer man vil,
så længe de deler værdier. Men det jeg ikke ved er så, HVORDAN man
skriver denne selector ud.

Skriver man ex:
#container h1, h2, h3 { - }
...eller ville man skrive -
#container h1, #container h2, #container h3 { - }
...eller er det en helt tredje måde?

@Bertel
Du skal have mange tak for fiffet, det er jo ret smart hvis man lige
står og har mulighed for at bruge det.


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah har bragt dette til verden:
8X
>
> Jeg fulgte dit link til W3C's hjemmeside og forsøgte at læse lidt
> omkring det hele. Der er dog én ting jeg savner demonstreret, nemlig
> det specifikke som udgør mit problem.
>
> Jeg er klar over, at man kan sammenkode alle de selectorer man vil,
> så længe de deler værdier. Men det jeg ikke ved er så, HVORDAN man
> skriver denne selector ud.
>
> Skriver man ex:
> #container h1, h2, h3 { - }
> ..eller ville man skrive -
> #container h1, #container h2, #container h3 { - }
> ..eller er det en helt tredje måde?
>

Jeg forstår ikke helt hvad dit specifikke problem går ud på.

#container h1, h2, h3 { - }
vil match alle h1 i et vilkårligt element der har id="container", og
alle h2 og h3 elemnter i hele dokumentet ( også dem der er i
#container)
#container h1, #container h2, #container h3 { - }
vil matche alle h1, h2 og h3 elementer i et vilkårligt element der har
id="container" ( og ikke andre h1, h2 eller h3 i dokumentet).

, i css er en slags opremsning.

div, p, span { color : green; } vil sætte skrift farven for alle div, p
og span i dokumentet.
div p span { color : green; } vil sætte farven i alle span, der sidder
i et p, der er indsat en div til grøn.
mellemrum angiver descendant.
(descendant = nedstammer fra, child = barn af.)

Man kan skelne mellem child og descendant
> angiver child
men en descendant er også child.

child er et element der sidder direkte i elementet, mens ancestor kan
have elementer imellem.
eksempel:
i html
<div>
<p>..</p>
<blockquote>
<p>..</p>
</blockquote>
</div>
vil div være parent.
den første p er child af div.
blockquoten er child af div.
den anden p er child af blockquote, og ancestor af div.
div p { .. } (p der er ancestor af div) vil "ramme" begge p'erne i
ovenstående
div > p { .. } ( p er child af div) vil kun "ramme" den første (den
anden er ikke en child af div)
for kun at ramme den anden, kan bruges
blockquote > p {..} (p er child af blockquote) eller
div > blockquote > p {..} (p er child af blockqute der er child af div)
(specificerer at blockquoten skal være et child af et div, men "stylen"
rammer kun p i dette blockquote)

Håber det kaster lidt lys. Som du er inde på, er der mange muligheder,
og selv når man har fattet nogle af dem, er de svære at forklare ^^

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Jahirah skrev:

> Jeg er klar over, at man kan sammenkode alle de selectorer man vil,
> så længe de deler værdier. Men det jeg ikke ved er så, HVORDAN man
> skriver denne selector ud.

Birger har givet det lange svar. Her er det korte:

> Skriver man ex:
> #container h1, h2, h3 { - }
> ..eller ville man skrive -
> #container h1, #container h2, #container h3 { - }
> ..eller er det en helt tredje måde?

Du skal skrive
#container h1, #container h2, #container h3 { - }

For at style både h1, h2 og h3 hvis de ligger inden i container.
Ingen andre hx-ere vil blive berørt, men det gælder alle h1, h2
og h3 i containeren (jf. mit fif).

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen and Birger Sørensen wrote in
dk.edb.internet.webdesign.html:
>
> Birger skrev:
>
> "Jeg forstår ikke helt hvad dit specifikke problem går ud på.
>
> #container h1, h2, h3 { - } vil match alle h1 i et vilkårligt element
> der har id="container", og #container h1, h2, h3 { - } og alle h2 og >
h3 elemnter i hele dokumentet ( også dem der er i #container)
>
> #container h1, #container h2, #container h3 { - } vil matche alle h1,
> h2 og h3 elementer i et vilkårligt element der har id="container" (og
> ikke andre h1, h2 eller h3 i dokumentet)".
>
> ...samt meget nyttig information!
>
> ----------------------------------------------------------
>
> Bertel skrev:
>
> "Du skal skrive #container h1, #container h2, #container h3 { - }
>
> For at style både h1, h2 og h3 hvis de ligger inden i container.
> Ingen andre hx-ere vil blive berørt, men det gælder alle h1, h2 og h3
> i containeren (jf. mit fif)".

------------------------------------------------------------

Igen kan jeg kun takke mange gange for jeres svar. Jeg vil give dig ret
Birger, at selvom man har forstået finten (eller tror man har) så kan
det stadigvæk være svært at forklare :)
Ikke desto mindre har i gjort et rigtig godt forsøg, så mange tak til
jer begge to :)

Jeg har på det sidste fået mere forståelse for CSS'ens fordelagtigheder
- hvis man kan sige det sådan. Jeg øver mig i at udnytte CSS'en til at
lave mindst mulig arbejde med mest muligt outcome. Pt. er det bare
træning da jeg personligt foretrækker færre "globale" site settings.

Jeg vil gøre et forsøg på at forklare jer, hvordan jeg opfatter det med
sammenkædede selectors og hvordan min logik er - jeg vil gerne hvis i
kunne fortælle mig om jeg er gået helt galt i byen (hvis i selvfølgelig
forstår det jeg vil prøve at sige hehe).

Normalt hvis jeg laver en side deler jeg den gerne i 3 sektioner: top |
midte | fod. Jeg bruger gerne nogle andre H<!>'er i toppen og vil typisk
lave en #header h1 {} og #header p {} eller lignende.

Jeg betragter DIVs som kasser. Nogen er større end andre, og de største
er dem der indeholder alle de andre, og derfor også dem der sætter
dagsordenen.

En tilføjet class selektor kobles på ved at skrive ex:
#header.classname (..eller er det med mellemrum før punktum?)


Jeg husker én herinde fra fortælle om deres måde at sætte deres
stylesheets op, at han betragtede det som kasser - jeg tror det smittede
af :)

Gir' det nogen mening det jeg vrøvler om her?
Og hvis det gør, er jeg så helt galt afmarcheret? :)

Mange tak for jeres svar so far, værdsætter at i bruger tid herinde :)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah formulerede fredag:
> En tilføjet class selektor kobles på ved at skrive ex:
> #header.classname (..eller er det med mellemrum før punktum?)

#header .classname { .. } læses alle elemter med class=classname der er
ancesteor (altså sidder inde i, uden nødvendigvis at sidde direkte i)
af et element hvis id=header.
#header.classname {..} læses som elementer med classname=classname og
id=header.

Og det er ikke det samme.

Den med punktummet, kan være lidt kryptisk. Hvis man ikke skriver noget
foran, læses *.classname - altså et hviletsomhelst element med
class=classname.
I dit spørgsmål, står der noget foran - og det er så det der gælder,
altså elementer med id=header.
(Men husk, at der kan kun være eet element med den id!)

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Jahirah skrev:

> Normalt hvis jeg laver en side deler jeg den gerne i 3 sektioner: top |
> midte | fod. Jeg bruger gerne nogle andre H<!>'er i toppen og vil typisk
> lave en #header h1 {} og #header p {} eller lignende.

Jeg vil normalt kun bruge én h1, og den styler jeg som det nu
passer. Den behøver derfor ingen id.

Hvad siden angår, så går jeg ud fra indholdet. Jeg deler tekst op
med p og omkranser den med en div for at kunne give den et
bestemt udseende.

Det er ikke så tit at jeg bruger 'sammenkoblede' elementer. Jeg
bruger ofte at style tags som ligger inden i en klasse:

   .spiltabel th { text-align: left; }

> Jeg betragter DIVs som kasser. Nogen er større end andre, og de største
> er dem der indeholder alle de andre, og derfor også dem der sætter
> dagsordenen.

Jeg ved ikke om jeg tænker anderledes end dig. Jeg samler ting
der skal have samme egenskaber. Det gælder både elementerne på
siden og klasser/id'er i CSS-filen. Jeg putter ting i en div hvis
de skal følges ad eller have ens udseende.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:
>
> Jeg ved ikke om jeg tænker anderledes end dig. Jeg samler ting
> der skal have samme egenskaber. Det gælder både elementerne på
> siden og klasser/id'er i CSS-filen. Jeg putter ting i en div hvis
> de skal følges ad eller have ens udseende.

@Bertel
Det er nok en væsentlig bedre måde at formulere sig på!
Netop det med at skal 2 elementer følges ad så tilføjer jeg dem gerne den
samme DIV og at samle de ting som skal dele egenskaber.
...Kan kun håbe at øvelse vil kunne hjælpe med formuleringen fremover.

@Birger
Mange tak for at gøre mig opmærksom på forskellen imellem
'#header.classname'
'#header .classname'
Nu tror jeg at jeg vil tage denne viden med mig og eksperimentere lidt for
at se koden visuelt :)

Mange tak for hjælpen begge to!

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jahirah skrev:

> Er der nogen grundregler i disse sammenhænge jeg bør være
> opmærksomme på?
>
> #container.content selectoren arver #container ID'ets værdier
> medmindre andet angives? Rigtigt eller forkert?
>
> *Krydser fingre for ikke at ligne et lallende fjols*

Hvorfor skulle nogen dog tro det? "De eneste
dumme spørgsmål er de spørgsmål, der ikke bliver
stillet." (Mark Twain).


Jeg arbejder på nogle artikler om disse emner.
Afsnittet http://webdesign101.dk/www/css/#ex4 for-
tæller noget om sammenkædede klasser.

Bemærk venligst de øvrige artikler om emnet, som
er nævnt, enten ikke er uploadet eller ikke er
fuldstændige.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..