CODEWITHSUNDEEP
csszurb-foundation
Ian Greenleaf Young
Ian Greenleaf Young

Reputation: 1958

Foundation font sizing in lists

I'm using Foundation. I've got a dropdown menu structured like so:

<div class="dropdown"><ul><li>...

I want to change the font size of all the elements in this menu. However, when I try to target them with .dropdown { font-size: 0.5em; }, I get overridden by this rule from the Foundation styles: ul, ol, dl { font-size: 1rem; }.

Is my only recourse to target the list elements specifically? i.e. .dropdown ul { font-size: 0.5em; }. This introduces a lot of unwanted specificity. To make matters worse, there's a second font-size rule for nested lists, so I would have to account for that as well with even more specific selectors. Seems like I'll trip over this a lot.

Am I missing something? How do I make this not such an annoyance?

Upvotes: 0

Views: 108

Answers (1)

cimmanon
cimmanon

Reputation: 68319

You will need to either make your styles more specific or alter the default size for all lists.

The reason being ul, ol, dl { font-size: 1rem }. If it had been using em or % instead, then it would have happily taken its context from the ancestor element (.dropdown in this case, which is .5em).

So, you could either do this:

ul, ol, dl {
    font-size: 1em; // or 100%
}

Or

.dropdown ul, .dropdown ol, .dropdown dl {
    font-size: 1em; // or 100%
}

They'll both do what you're looking for without the side effects that would come along with your proposed styles when there's nesting involved (.dropdown ul { font-size: .5em }). The second option I've provided should be specific enough to override styles for nested lists.

Upvotes: 1

Related Questions