The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #237325

    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:

    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?


    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


    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:

    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?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.