problem med :first-child & :last-child

Tags:    css

Hej der ude.

nu er jeg ik vildt god til CSS men det er ret lige til ville jeg mene.

min HTML ser sådan her ud:
Fold kodeboks ind/udHTML kode 


hvis jeg så ønsker at uplaode 2 nye filer ser det sådan her ud:
Fold kodeboks ind/udHTML kode 


det virker super og alt det der, men så ønsker jeg at have en border under det første billede som er uploadet (.template-download) og en border under den sidste fil man er igang med at uploade (.template-upload)

min css:
Fold kodeboks ind/udCSS kode 


nu er mit problem så bare, hvis der kun er filer som er uploaded (.template-download) er der en border under det første billede som der skal være, men hvis jeg nu tilføjer en ny fil til køen, så forsvinder den border under det første billede. og der kommer heller ikke nogen border under det sidste billede i køen.

nogen der kan se min fejl?



3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 10 karma
Sorter efter stemmer Sorter efter dato
Jeg har også svært ved at forstår det der CSS med :first-child osv.

Men jeg tror det er sådan her...

Se koden her :

Fold kodeboks ind/udCSS kode 


Fold kodeboks ind/udHTML kode 


Når du bruger :first-child så vælger du det første barn AF FORÆLDRE elementet.

Altså :first-child bruges på span også går den tilbage til forældre tagget (som er div) og tager det første barn af div.

...

Også syntes jeg alle de eksempler jeg ser med :first-child osv der kan man ikke vælge en class eller id. Så det kan vist kun bruges på et element så vidt jeg forstår.

...

Så jeg tror for at det kan virke så skal du lave din kode om sådan her.
Fold kodeboks ind/udHTML kode 




Indlæg senest redigeret d. 30.06.2012 18:00 af Bruger #13010
Ja der kommer CSS selectors lidt til kort - der er ikke rigtig mulighed for at ramme din upload class hvis der er download classes med samme tag element efterfølgende - medmindre man har styr på index på den sidste, så kan man bruge nth-of-type(index).

Se man burde jo kunne gøre sådan her synes jeg: .upload:last-of-type, men desværre virker last-of-type ikke sådan, den kigger først på om det er det sidste element i rækken og bagefter om det så har en class upload tilføjet.

Men du kan godt ramme din første .template-download med det her:
Fold kodeboks ind/udCSS kode 


Så kan du da reducere dit jquery til at kun ramme upload:last.



tja, må finde på en anden løsning så.

edit, pt har jeg løst det med jQuery
Fold kodeboks ind/udJScript kode 

Fold kodeboks ind/udCSS kode 


hvis der er nogen der har en bedre løsning er jeg åben for forslag =)



Indlæg senest redigeret d. 30.06.2012 22:19 af Bruger #3427
t