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活動進行中
Style setting
Here comes coupon-unit
with nth-child setting.