CSS > nth-child (complex usage)

nth-child is an evolution for CSS selector. Developers could simplify CSS rules setting with nth-child support. Besides above, developers could also maintain same HTML structure consistency without other extra class rules and logical check in render process.

Such as the following 「coupons」, all of them has same HTML structure and mutate with just CSS nth-child setting. We could easy see there are 3 conditions when coupon in different count (1 / 2 / 2+).

Looks interesting, isn't it ? Inspect them or check the following CSS setting.

活動進行中

我是活動標題 - (1 piece)

滿400元折

$300

YAHOO

copy

活動進行中

我是活動標題 - (2 pieces)

滿400元折

$300

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

滿800元折

$650

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

活動進行中

我是活動標題 - (more than 2 pieces)

滿400元折

$300

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

滿800元折

$650

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

滿400元折

$300

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

滿400元折

$300

W1-3WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

copy

Style setting

Here comes coupon-unit with nth-child setting.

<style> /* coupon-unit basic style in 1 piece */ .coupon-unit { ... } /* coupon-unit style in 2 pieces */ .coupon-unit:not(:only-child) { ... } /* coupon-unit style in 2+ pieces, black cover setting */ .coupon-unit:nth-of-type(n+3):nth-last-of-type(1) { ... } </style>