css - problem med :first-child & :last-child - Udvikleren.dk

Tags: css

Bruger #3427 @ 30.06.12 14:27

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:

HTML kode

 <div id="files_list" class="files ui-sortable" data-target="#modal-gallery" data-toggle="modal-gallery">
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
 </div>

hvis jeg så ønsker at uplaode 2 nye filer ser det sådan her ud:

HTML kode

 <div id="files_list" class="files ui-sortable" data-target="#modal-gallery" data-toggle="modal-gallery">
   <div class="template-upload fade in">...</div>
   <div class="template-upload fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
   <div class="template-download fade in">...</div>
 </div>

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:

CSS kode

 /* filer der er uploaded før */
 #files_list .template-download:first-child{
   background-image: url('/interface/graphics/border_dotted.png');
   background-repeat: repeat-x;
   background-position: bottom left;
   margin-bottom: 20px;
 }
 
 /* filer i kø til at blive uploaded */
 #files_list .template-upload:last-child{
   background-image: url('/interface/graphics/border_dotted.png');
   background-repeat: repeat-x;
   background-position: bottom left;
   margin-bottom: 20px;
 }

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

Bruger #13010 @ 30.06.12 17:58

440

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 :

CSS kode

 span:first-child {  
    background-color: lime;  
 }

HTML kode

 <div>  
    <span>This span is limed!</span>  
    <span>This span is not. :(</span>  
 </div>

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.

HTML kode

 <div id="files_list" class="files ui-sortable" data-target="#modal-gallery" data-toggle="modal-gallery">
 
    <div>
     <div class="template-upload fade in">...</div>
     <div class="template-upload fade in">...</div>
    </div>
 
    <div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
     <div class="template-download fade in">...</div>
    </div>
 
 </div>

Indlæg senest redigeret d. 30.06.2012 18:00 af Bruger #13010

Bruger #16977 @ 06.07.12 11:43

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:

CSS kode

 .template-upload +.template-download {
     border-bottom: 1px dotted red;
 }
 :first-child.template-download { /* For at også lave border på hvis der ingen upload er */
     border-bottom: 1px dotted red;
 }

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

Bruger #3427 @ 30.06.12 21:41

1.520

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

edit, pt har jeg løst det med jQuery

JScript kode

 $("#files_list").bind("DOMNodeInserted DOMNodeRemoved", function() {
   
   $(".template-download").removeClass("template-download-first");
   $(".template-upload").removeClass("template-upload-last");
   
   $(".template-download:first").addClass("template-download-first");
   $(".template-upload:last").addClass("template-upload-last");
   
 });

CSS kode

 /* filer der er uploaded før */
 #files_list .template-download-first{
   background-image: url('/interface/graphics/border_dotted.png');
   background-repeat: repeat-x;
   background-position: bottom left;
   margin-bottom: 20px;
 }
 
 /* filer i kø til at blive uploaded */
 #files_list .template-upload-last{
   background-image: url('/interface/graphics/border_dotted.png');
   background-repeat: repeat-x;
   background-position: bottom left;
   margin-bottom: 20px;
 }

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

problem med :first-child & :last-child

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler