font-size of (parent) , when it contains a child

[grimski]

I think everyone comes across this issue once and a while, it’s been a while since I’ve investigated it so I thought I’d asked the question and see if anyone had any alternatives to the solution I’d normally go for.

I basically have a list, which can have 2 states. The 1st is a straightforward list with only list-items (containing anchors) as children. The 2nd contains a nested list. You can see them both in the following CodePen:

http://codepen.io/moy/pen/EPELbe

The problem is as the parent li essentially become headings, I want to increase the font-size, which I’ve done. But then when the list doesn’t contain nested ul‘s, I’d want the text to appear smaller again.

Is there anyway to target this without adding a class of has-child or nav__item--has-child (to follow my BEM convention)?

The good thing is, when the list contains a further level of nested ul‘s, the parent li won’t contain an anchor, so I could style the high-level items like li {font-size: 20px} and the anchor a {font-size: 16px}?

That seems a bit hacky to me and could bring up consistancy issues with font size/alignment and line-height. What do people think, maybe the class is the safe fool-proof choice?

[Paulie_D]

Until CSS Level 4 comes long there is no way of changing the styles of a parent based on a child.

So, a class would be the way to go

[grimski]

Thanks, as expected but it’s good to return to these things from time to time incase progress has been made!

I’ve updated the CodePen: http://codepen.io/moy/pen/EPELbe

I have a couple of questions, not related to the font-size but to avoid a new thread I’ll ask here:

1. Regarding BEM, i’ve used the class of keyword-index__item--has-child is that ok? Or is it acceptable to just use has-child? I seem to come across different levels of strictness!

2. Is about column-count. It seems a bit hit and miss? For example if you look at the updated CodePen, why does the first list not span into 5 columns as is declared – it’s how the second list is displayed?

I’ve also noticed margins can run into the next column. For example if the last item in a column is the end of a (parent) list-item, the margin-bottom can appear at the top of the next column, pushing everything down?

[Author]

Posts