Foundation different style for small - medium - large

I would like to give different CSS to H2 when his parent is large - medium - small.

Here my HTML:

            <div class="category-box large-6 medium-6 small-12 columns">
                <h2 class="category-name">My title</h2>
                <div class="hide-for-small">Everything you need to know about using the framework.</div>
            </div>

I tryed this kind of selection:

.category-box.large-6 h2{}
.category-box.medium-6 h2{}
.category-box.small-12 h2{}

But is not working as i want.