CSS child toepassen

[Frenske123]

Beste,

Ik had graag na elk 2e en daarna aan elke 4e rij een border aan der rechterkant

al wat met li:nth-child(2n+0) geprobeerd, maar niet een oplossing

Voorbeeld code schematische weergave:

</li></li> 
</li></li> border-right: #000  solid 1px;

</li></li>
</li></li>
</li></li>
</li></li> border-right: #000  solid 1px;

</li></li>
</li></li>
</li></li>
</li></li> border-right: #000  solid 1px;

enz.

classes kan ik hier niet toepassen

Ik weet niet of dit kan , iemand een idee?

 

[Tha Devil]

Dit ga je met CSS volgens mij niet redden, daarvoor is het een te onregelmatige interval.

Waarom wil je het op deze manier oplossen?

 

[Frenske123]

Dit ga je met CSS volgens mij niet redden, daarvoor is het een te onregelmatige interval.

Waarom wil je het op deze manier oplossen?

Ik haal de li eenmalig uit de database

<li id="arrayorder_<?php echo $id ?>">

data........
 </li>

Er zullen nog wel andere oplossingen zijn?

 

[Tha Devil]

Als je toch invloed hebt op de weergave kun je ook wel classes toevoegen.

Kwestie van een teller bijhouden in je while:

$count = 1;
while ($row = $result->fetch_assoc()) {
    $class = '';
    if ($count == 2 || ($count - 2) % 4 == 0) {
        $class = ' class="border-right"';
    }
    echo '<li'. $class .'>...</li>';
    $count++;
}

 

[Frenske123]

Dat is mooi!

Kan het ook op deze manier, dus 1 t/m 3 een border en 4 niet, enz het is nog niet duidelijk voor mij

if ($count == 2 || ($count - 2) % 4 == 0) {

</li></li>border-right: #000 solid 1px;
</li></li>border-right: #000 solid 1px;
</li></li>border-right: #000 solid 1px;
</li></li>

</li></li>border-right: #000 solid 1px;
</li></li>border-right: #000 solid 1px;
</li></li>border-right: #000 solid 1px;
</li></li>

 

[Tha Devil]

Als het een kan, kan het ander natuurlijk ook

Kwestie van de uitzondering aanpassen. In plaats van de 2e en elke 4e daarna pakken we gewoon alleen elke vierde iteratie en laten we die geen klasse meegeven.

$count = 1;
while ($row = $result->fetch_assoc()) {
    $class = ' class="border-right"';
    if ($count % 4 == 0) {
        $class = '';
    }
    echo '<li'. $class .'>...</li>';
    $count++;
}

 

[Frenske123]

Bedankt,

verhoogt die $count++; nu ook %4?

1e rij delen door 4 == 0 , geen border
2e rij deken door 8? geen border

 

[Tha Devil]

Bij elke iteratie gaat $count met één omhoog.

De % is een modulo, wat inhoudt dat bij elke iteratie het getal uit $count door 4 wordt gedeeld en de restwaarde overblijft.

Hier de checks per iteratie

[table=class: full_border]
[tr]
[td]Modulo[/td]
[td]Restwaarde[/td]
[/tr]
[tr]
[td]1 % 4[/td]
[td]1[/td]
[/tr]
[tr]
[td]2 % 4[/td]
[td]2[/td]
[/tr]
[tr]
[td]3 % 4[/td]
[td]3[/td]
[/tr]
[tr]
[td]4 % 4[/td]
[td]0[/td]
[/tr]
[tr]
[td]5 % 4[/td]
[td]1[/td]
[/tr]
[tr]
[td]6 % 4[/td]
[td]2[/td]
[/tr]
[tr]
[td]7 % 4[/td]
[td]3[/td]
[/tr]
[tr]
[td]8 % 4[/td]
[td]0[/td]
[/tr]
[/table]

 

[Frenske123]

Tha devil, bedankt voor je toelichting, maakt een en ander duidelijk.