---

Jeg har en testside:
http://webdesign101.dk/x/usenet/nth-child.html

Det grønne og det røde tekstasfnit er
formateret med
#side p:nth-child(3) {color:teal;}
#side p:nth-child(10) {color:maroon;}

Alligevel er det det andet og det ottende
p der bliver matchet.

Det er let at se at det er hhv h1-overskriften
og hr-elementet der tælles med. Men skal det
være sådan?
--

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

---

Jørgen Farum Jensen sendte dette med sin computer:
> Jeg har en testside:
> http://webdesign101.dk/x/usenet/nth-child.html
>
> Det grønne og det røde tekstasfnit er
> formateret med
> #side p:nth-child(3) {color:teal;}
> #side p:nth-child(10) {color:maroon;}
>
> Alligevel er det det andet og det ottende
> p der bliver matchet.
>
> Det er let at se at det er hhv h1-overskriften
> og hr-elementet der tælles med. Men skal det
> være sådan?

Umiddelbart er svare ja.
Både h1 og hr, er jo også child af side, så derfor skal de da tælles
med..
Jeg tæller da alle mine, selvom de ikke er ens

p:nth-child(10) er det p element der er det 10'ende barn af.. og de
foregående 9 behøver ikke være p'er.
Sådan læser jeg det i hvert fald.

Birger

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

---

Birger Sørensen skrev:

>> Det grønne og det røde tekstasfnit er
>> formateret med
>> #side p:nth-child(3) {color:teal;}
>> #side p:nth-child(10) {color:maroon;}
>>
>> Alligevel er det det andet og det ottende
>> p der bliver matchet.
>>
>> Det er let at se at det er hhv h1-overskriften
>> og hr-elementet der tælles med. Men skal det
>> være sådan?
>
> Umiddelbart er svare ja.

Og ja til begge spørgsmål, for hvorfor
skulle vi ellers have p:nth-of-type(n)?


--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Jørgen Farum Jensen har bragt dette til verden:
> Birger Sørensen skrev:
>
>>> Det grønne og det røde tekstasfnit er
>>> formateret med
>>> #side p:nth-child(3) {color:teal;}
>>> #side p:nth-child(10) {color:maroon;}
>>>
>>> Alligevel er det det andet og det ottende
>>> p der bliver matchet.
>>>
>>> Det er let at se at det er hhv h1-overskriften
>>> og hr-elementet der tælles med. Men skal det
>>> være sådan?
>>
>> Umiddelbart er svare ja.
>
> Og ja til begge spørgsmål, for hvorfor
> skulle vi ellers have p:nth-of-type(n)?

Det er fint med de mange nye pseudo-classes. Men man kan altså også
blive forvirret.

Birger

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

---

Birger Sørensen wrote:

> Jørgen Farum Jensen har bragt dette til verden:
>>
>> Og ja til begge spørgsmål, for hvorfor
>> skulle vi ellers have p:nth-of-type(n)?
>
> Det er fint med de mange nye pseudo-classes. Men man kan altså også
> blive forvirret.

Jeg kender ikke så meget til det der CSS, men kom til at tænke på, at jeg på
et tidspunk havde brug for at style kolloner i en tabel.

Kan det bruge til det?

Altså hvis jeg har en tabel a la:
<table>
<tr><th>kol1</th><th>kol2</th></tr>
<tr><td>data1</td><td>data2</td></tr>
.....
</table>

Hvis jeg f.eks. ønsker at 'kol2' altid har et baggrundsbillede, er det så
muligt?

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:
> Birger Sørensen wrote:
>
>> Jørgen Farum Jensen har bragt dette til verden:
>>> Og ja til begge spørgsmål, for hvorfor
>>> skulle vi ellers have p:nth-of-type(n)?
>> Det er fint med de mange nye pseudo-classes. Men man kan altså også
>> blive forvirret.
>
> Jeg kender ikke så meget til det der CSS, men kom til at tænke på, at jeg på
> et tidspunk havde brug for at style kolloner i en tabel.
>
> Kan det bruge til det?
>
> Altså hvis jeg har en tabel a la:
> <table>
> <tr><th>kol1</th><th>kol2</th></tr>
> <tr><td>data1</td><td>data2</td></tr>
> ....
> </table>
>
> Hvis jeg f.eks. ønsker at 'kol2' altid har et baggrundsbillede, er det så
> muligt?
>
Ja. I forhold til mit oprindelige spørgsmål er der
i en tabelrække udelukkende tale om td'er, så
tr td:nth-child(2) vil være formreglen for td'erne
i anden kolonne, jf. mit eksempel
http://webdesign101.dk/x/usenet/nth-child.html
Her er det som Birger understregede det tredje
element i div#side der matches.

Bemærk at IE8 understøtter nth-child(n) *hvis*
du bruger X-UA kompatibilitets switchen og
Dean Edwards IE 7/8 modulbibliotek - jf.
head-delen af min testside.

Denne understøttelse gælder ikke hele raden af
CSS3-selektorer, jf. min oversigt
http://webdesign101.dk/css3/pseudoklasser.pdf

--

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

---

Jørgen Farum Jensen wrote:

> Stig Johansen skrev:
>>
>> Hvis jeg f.eks. ønsker at 'kol2' altid har et baggrundsbillede, er det så
>> muligt?
>>
> Ja. I forhold til mit oprindelige spørgsmål er der
> i en tabelrække udelukkende tale om td'er, så
> tr td:nth-child(2) vil være formreglen for td'erne
> i anden kolonne, jf. mit eksempel
> http://webdesign101.dk/x/usenet/nth-child.html
> Her er det som Birger understregede det tredje
> element i div#side der matches.
>
> Bemærk at IE8 understøtter nth-child(n) *hvis*
> du bruger X-UA kompatibilitets switchen og
> Dean Edwards IE 7/8 modulbibliotek - jf.
> head-delen af min testside.

Det handler om IE - igen, igen.

Jeg tror det var dig, der kom med hintet (for laang tid siden) til det
'trick' med tr+td+td.. osv

Der lagde jeg dette eksempel ud:
<http://w-o-p-r.dk/sal/saltest.html>
som virkede(og virker) både i FF, og selv min gamle Konqueror, men ikke i IE
- heller ikke IE8, har jeg lige set.

Så mit spørgsmål går egentlig ud på om man kan sætte baggrundsbilleder på de
<td>'ere ( nummer 3,4 og 5), hvor der bare skal være et klikbart ikon.

(Jeg havde ikke tjekket i IE8 før jeg skrev, så det er først nu jeg finder
ud af, at det ikke virker i den).

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:
> Jørgen Farum Jensen wrote:
>
>> Stig Johansen skrev:
>>> Hvis jeg f.eks. ønsker at 'kol2' altid har et baggrundsbillede, er det så
>>> muligt?
>>>
>> Ja. I forhold til mit oprindelige spørgsmål er der
>> i en tabelrække udelukkende tale om td'er, så
>> tr td:nth-child(2) vil være formreglen for td'erne
>> i anden kolonne, jf. mit eksempel
>> http://webdesign101.dk/x/usenet/nth-child.html
>> Her er det som Birger understregede det tredje
>> element i div#side der matches.
>>
>> Bemærk at IE8 understøtter nth-child(n) *hvis*
>> du bruger X-UA kompatibilitets switchen og
>> Dean Edwards IE 7/8 modulbibliotek - jf.
>> head-delen af min testside.
>
> Det handler om IE - igen, igen.

Amerikanerne har nogle herlige talemåder,
som vist kun Ida Hammerich kan oversætte:
Do you want to cut bait or di you want to fish?
eller min noget kortere favorit: Deal with it!

I årenes løb har jeg gentaget mange gang i
disse nyhedsgrupper at hvis man mener noget
seriøst med faget må man forholde sig til det
faktum at et flertale af brugerne bruger en
browser, vi seriøst hader. Det gider jeg ikke mere.
Deal with it!
> Jeg tror det var dig, der kom med hintet (for laang tid siden) til det
> 'trick' med tr+td+td.. osv

Er du heller sikker på den syntaks - jeg kan
i hvert fald ikke huske det.
tr.row td+td
vælger alle td'er undtagen den første i tr med
klassen row.

> Så mit spørgsmål går egentlig ud på om man kan sætte baggrundsbilleder på de
> <td>'ere ( nummer 3,4 og 5), hvor der bare skal være et klikbart ikon.

Du kunne bruge nth-child(N), men alt taget i
betragtning er det nok nemmere at bruge
col.third {background-image: ...}
col.fourth {background-image: ...}
col.fifth {background-image: ...}




--

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

---

> I årenes løb har jeg gentaget mange gang i
> disse nyhedsgrupper at hvis man mener noget
> seriøst med faget må man forholde sig til det
> faktum at et flertale af brugerne bruger en
> browser, vi seriøst hader. Det gider jeg ikke mere.
> Deal with it!

Nemlig... Skrot FF!

;)

Christian

---

Christian Kragh forklarede den 21-11-2009:
>> I årenes løb har jeg gentaget mange gang i
>> disse nyhedsgrupper at hvis man mener noget
>> seriøst med faget må man forholde sig til det
>> faktum at et flertale af brugerne bruger en
>> browser, vi seriøst hader. Det gider jeg ikke mere.
>> Deal with it!
>
> Nemlig... Skrot FF!
>
> ;)
>
> Christian

Ja - ud med det der virker. M$ skulle nødig have urimelig konkurrence!


Birger

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

---

Christian Kragh skrev:
>> I årenes løb har jeg gentaget mange gang i
>> disse nyhedsgrupper at hvis man mener noget
>> seriøst med faget må man forholde sig til det
>> faktum at et flertale af brugerne bruger en
>> browser, vi seriøst hader. Det gider jeg ikke mere.
>> Deal with it!
>
> Nemlig... Skrot FF!

LOL ...men det var nu ikke det
jeg mente. Jeg gider bare ikke
diskutere det mere eller bruge
krudt på at deltage i den almindelige
nedrakning af Microsoft.

En lillebitte smule objektivitet
i forhold til de ting MS faktisk
nu gør kan bringe én til bedre
at anskue verden som den er, og
ikke som vi ønsker den skal være.

BTW se http://www.css3.info/ blogpost
fra 18/11.
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> wrote in message
news:4b07daec$0$36580$edfadb0f@dtext01.news.tele.dk...
>
> LOL ...men det var nu ikke det
> jeg mente. Jeg gider bare ikke
> diskutere det mere eller bruge
> krudt på at deltage i den almindelige
> nedrakning af Microsoft.

Mit spørgsmål gik ikke ud på at rakke IE ned, men om der fandtes en
alternativ måde at sætte baggrundsbilleder på en kolonne (som måske kunne
virke i IE9).

Bredden kan jeg style via col, men ikke indholdet.

Det, der virker i FF (og IE) er:
..Sal9000Sentenses tr td + td + td {
men de efterfølgende:
..Sal9000Sentenses tr td + td + td + td {
..Sal9000Sentenses tr td + td + td + td + td {
har ikke nogen effekt i IE, så kollonne 4 og 5 har samme baggrundsbillede
som kolonne 3.

--
Med venlig hilsen/Best regards
Stig Johansen

---

Ejendommeligt nok virker det i Expression Web 3 SP1 men i både IE7 og
8 fejler det og i IE6 virker det selvfølgelig slet ikke.
Du har en frygtelig masse fejl på siden hvor langt de fleste skyldes
uafsluttede tags (mest i input) Der er dog en lidt mere speciel:
In XHTML 1.0 Strict the attribute 'style' is not permitted for the
<br> tag.
Jeg tror ikke at det vil ændre noget at rette dem men du kan jo
forsøge for god ordens skyld.

Regards Jens Peter Karlsen.

On Sat, 21 Nov 2009 18:22:21 +0100, "Stig Johansen"
<wopr.dk@gmail.com> wrote:

>Det, der virker i FF (og IE) er:
>.Sal9000Sentenses tr td + td + td {
>men de efterfølgende:
>.Sal9000Sentenses tr td + td + td + td {
>.Sal9000Sentenses tr td + td + td + td + td {
>har ikke nogen effekt i IE, så kollonne 4 og 5 har samme baggrundsbillede
>som kolonne 3.

---

Jens Peter Karlsen wrote:

> Ejendommeligt nok virker det i Expression Web 3 SP1 men i både IE7 og
> 8 fejler det og i IE6 virker det selvfølgelig slet ikke.

Det lyder interessant.
Jeg kender ikke Expression Web, men taler du om en preview funktion?

De har åbenbart præsenteret en 'udviklingsversion' af IE9, så det kan tænkes
at nogle af faciliteterne er med i Expression Web.

> Du har en frygtelig masse fejl på siden hvor langt de fleste skyldes
> uafsluttede tags (mest i input)

Ja, men det er der ikke i virkeligheden.
Indholdet er genereret via Ajax, så for at lave en version til eksempel, har
jeg brugt Validate After Javascript (i FF), og copy/pasted sourcen.

Denne funktion får ikke trailing / med på tags.

> Der er dog en lidt mere speciel:
> In XHTML 1.0 Strict the attribute 'style' is not permitted for the
> <br> tag.
Det er vist en smutter - gad vide hvor den kom fra - må ned og kigge i
js/asp'en - engang.

> Jeg tror ikke at det vil ændre noget at rette dem men du kan jo
> forsøge for god ordens skyld.

Det må jeg huske at gøre, men indtil videre skulle jeg egentlig bruge en
løsning til et andet projekt.

Jeg tror jeg prøver at fortsætte med samme metode, da det kunne se ud som om
det kommer til at virke i senere versioner af IE.

Så længe funktionaliteten er der, er det 'bare' en kosmetisk fejl.

--
Med venlig hilsen
Stig Johansen

---

I selve WYS delen af EW.

Regards Jens Peter Karlsen.

On Sun, 22 Nov 2009 00:16:36 +0100, Stig Johansen <wopr.dk@gmaill.com>
wrote:

>Det lyder interessant.
>Jeg kender ikke Expression Web, men taler du om en preview funktion?

---

Stig Johansen skrev:

> Bredden kan jeg style via col, men ikke indholdet.
>
> Det, der virker i FF (og IE) er:
> .Sal9000Sentenses tr td + td + td {
> men de efterfølgende:
> .Sal9000Sentenses tr td + td + td + td {
> .Sal9000Sentenses tr td + td + td + td + td {
> har ikke nogen effekt i IE, så kollonne 4 og 5 har samme baggrundsbillede
> som kolonne 3.

Du bliver ved med at udnævne dine td'er til at være adjacent
sibling (nærmest søskende), så du kan ikke vælge kolonner på
den måde. Og hvis du endelig vil bruge CSS, så er det
tr td:nth-child(4),
tr tdnth-child(5) {...}
du skal bruge, og med al det andet jeg tidligere har
beskrevet for at få det til at virke i IE.

Mit forslag var
col.fourth {background-image:...}
Jeg kan anbringe et baggrundsbillede i hver celle
med ovenstående,. menkan ikke komme af sted med
at positionere det.

Derfor er løsningen som antydet
tr.row td:nth-child(3) {
background-image:url(bluestar.png);
background-repeat:no-repeat;}

For at få det til at virke i IE skal du
som tidligere nævnt tage nogle forholdsregler,
jf. mit eksempel
http://webdesign101.dk/x/usenet/tabel2.html


--

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

---

Jørgen Farum Jensen forklarede den 22-11-2009:
> Stig Johansen skrev:
>
>> Bredden kan jeg style via col, men ikke indholdet.
>>
>> Det, der virker i FF (og IE) er:
>> .Sal9000Sentenses tr td + td + td {
>> men de efterfølgende:
>> .Sal9000Sentenses tr td + td + td + td {
>> .Sal9000Sentenses tr td + td + td + td + td {
>> har ikke nogen effekt i IE, så kollonne 4 og 5 har samme baggrundsbillede
>> som kolonne 3.
>
> Du bliver ved med at udnævne dine td'er til at være adjacent
> sibling (nærmest søskende), så du kan ikke vælge kolonner på
> den måde. Og hvis du endelig vil bruge CSS, så er det
> tr td:nth-child(4),
> tr tdnth-child(5) {...}
> du skal bruge, og med al det andet jeg tidligere har
> beskrevet for at få det til at virke i IE.
>
> Mit forslag var
> col.fourth {background-image:...}
> Jeg kan anbringe et baggrundsbillede i hver celle
> med ovenstående,. menkan ikke komme af sted med
> at positionere det.
>
> Derfor er løsningen som antydet
> tr.row td:nth-child(3) {
> background-image:url(bluestar.png);
> background-repeat:no-repeat;}
>
> For at få det til at virke i IE skal du
> som tidligere nævnt tage nogle forholdsregler,
> jf. mit eksempel
> http://webdesign101.dk/x/usenet/tabel2.html

Hmmm...
CSS3 løsningen er nth-child().
I CSS2.1 burde Stigs løsning svjks faktisk være OK - og egentlig også i
CSS3.
Syntes dog det måske ville være mere overskueligt med en class til de
kolonner. Giver lidt mere kode, men det betyder nok ikke så meget i
disse dage...

Birger

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

---

Birger Sørensen wrote:

> I CSS2.1 burde Stigs løsning svjks faktisk være OK - og egentlig også i
> CSS3.
> Syntes dog det måske ville være mere overskueligt med en class til de
> kolonner. Giver lidt mere kode, men det betyder nok ikke så meget i
> disse dage...

Hov, hov Birger - udfordringen går netop ud på at spare 'kode'.

Da det er servergenereret, er det intet problem at indføre:
class="edit",class="delete",class="move" på hver enkelt celle,
men det var netop det jeg var ude på at undgå.

Nu er det bare et eksempel, men tænk hvis der er hundredevis af rækker, så
fylde den (overflødige) kode en hel del.

(Events styres vha JS, så der er ikke brug for <a href." eller "onclick..")

Ad "overskueligt":
Det er genereret vha Ajax med kald til serveren, så der er kun tale om
ganske få linier server kode.

--
Med venlig hilsen
Stig Johansen

---

On 20 Nov., 13:15, Stig Johansen <wopr...@gmaill.com> wrote:
> Birger Sørensen wrote:
> > Jørgen Farum Jensen har bragt dette til verden:
>
> >> Og ja til begge spørgsmål, for hvorfor
> >> skulle vi ellers have p:nth-of-type(n)?
>
> > Det er fint med de mange nye pseudo-classes. Men man kan altså også
> > blive forvirret.
>
> Jeg kender ikke så meget til det der CSS, men kom til at tænke på, at jeg på
> et tidspunk havde brug for at style kolloner i en tabel.
>
> Kan det bruge til det?
>
> Altså hvis jeg har en tabel a la:
> <table>
> <tr><th>kol1</th><th>kol2</th></tr>
> <tr><td>data1</td><td>data2</td></tr>
> ....
> </table>
>
> Hvis jeg f.eks. ønsker at 'kol2' altid har et baggrundsbillede, er det så
> muligt?

Kan man ikke bruge nth-of-type?

A la:

td:nth-of-type(2){
background-image: url(image.jpg);
}

Man kan muligvis også bruge nth-child, hvis der kun er td'er som børn
af tr'er.

Hverken nth-child eller nth-of-type virker i IE, da det er css3.

Det er muligt, der er andre måder, men jeg har ikke lige
"testværktøjerne" ved hånden her.


MVH
Rune Jensen