Zurb Foundation: Set CSS nth-child depending on active size (large, medium, small)

Question

On large screens I want every 7th element to have a certain border. On medium screens I wnt these styles to be applied to every 4th.

How can I make my style a descendant of .small, .medium, .large?

Answer 1

first use jquery

$( "element:nth-child(7)" ).addClass("seventh_child");
$( "element:nth-child(4)" ).addClass("fourth_child");

with above you will able to find out every 7th and 4th element now with the help of media query you can add and remove css property according to device width.

i think it will help you...