Flere zebra striber! Nu med CSS3!

CSS3 har givet os mange ekstra nyttige funktioner, lige fra stroke, til drop-shadow, box-shadow og animationer, men den har også gjort det lidt nemmere for os at lave “Zebra-striberne”, som jeg lavede et indlæg om i PHP-sektionen.

Dette gøres via den nye funktion “:nth-child()”, som er en ny pseudo-selector, der sætter vores (læs: mine) grundskole-matematiske egenskaber til test. Men når man har fanget den, er det faktisk ret simpelt.

 

Sådan vil vores pseudo-selector så blive ved med at give hver anden (2n = second, 3n = third osv.) tag en alternativ CSS.
Man kan rode meget rundt med, hvor psudo-selectoren skal starte, osv. så prøv evt. at lege lidt med det på denne side: http://css-tricks.com/examples/nth-child-tester/

Håber i hvert fald at det gav lidt indblik i, hvordan man laver striber 100% uden PHP’s ellers fantastiske logisk-matematiske funktioner.