Forums

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

Home Forums CSS how to inherit from nonparent element

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #238517
    Nick Levinson
    Participant

    How do I copy a browser-specified style for one element to become the style for a nonchild element so I can change just the font-size and thus have the two styles be otherwise consistent in any given browser? I want a subtitle on a page. I’m using the h1 element with a class following an h1 element without a class, but I gather that having more than one h1 element regardless of class or id might confuse Google, so, I read somewhere, the subtitle should be a p element with styling. But I’m concerned that my attempt at styling a p element with a class attribute will produce weird results in different browsers in which I can’t test. So I’d like to say something like “p.example {inherit-from: h1; font-size: n}”. Is there any way to write CSS for this case?

    #238518
    Shikkediel
    Participant

    I think not. But I also think your concern about unpredictable results regarding a p element is unsubstantiated. Just be sure to do a padding and margin reset for all elements at the beginning.

    #238519
    Paulie_D
    Moderator

    So I’d like to say something like “p.example {inherit-from: h1; font-size: n}”. Is there any way to write CSS for this case?

    Not with CSS…although a pre-processor might help.

    What I have found is that when defining styles for headings it’s also useful to create a class for them at the same time.

    So:

    h1, .h1 {
    font-size:3rem;
    }
    

    That way I have a reusable class which I can use on any element to mimic an h1 and maintaining my semantics.

    In fact, Chris linked this the other day.

    http://csswizardry.com/2016/02/managing-typography-on-large-apps/

    #238630
    Nick Levinson
    Participant

    Solved: Within one sole h1 element, I write the title and the subtitle, but I separate them with a br element (optionally followed by a colon and, if I want to indent the subtitle, by nonbreaking spaces), enclose the nonbreaking spaces and the subtitle in a span element with a class or an id, and style the span with font-size at somewhere around 75%. I tested inheritance by setting h1 to red and the spanned-classed content also turned red. (Adding microdata is more complicated, involving a few span elements.) Please comment if you think this’ll be problematic.

    #238631
    Paulie_D
    Moderator

    Well it’s not a non-child solution like you wanted but without knowing the circumstances and your specific requirement it sounds like a solution.

    Personally it sounds to me as though you should just be using a wrapping div (rather than a heading) and go from there using standard HTML structure.

    #238755
    Nick Levinson
    Participant

    True, it’s not nonchild, but it’ll do and, meanwhile, I’ve emailed a proposal to the CSS people to support nonchild inheritance, although I think they may decline if there are not already two implementations (in, e.g., browsers) in the wild and one answer said “[a] big problem is loops. Inheritance is loop free.”

    I’m not clear how I’d use a div to like effect without breaking other markup intended to be standards-compliant and supportive of searches. I guess I’d define all the characteristics of headline-like styles. And for the concept of an h1 class to mimic an h1 element (or h[n] of h[n]), I’d be back to needing to know how browsers style the h1 (or h[n]) element. Maybe I haven’t thought it through enough yet, and someone suggested https://www.w3.org/TR/css-variables/ which I want to look into, but the span solution will probably be it until I do.

    Thanks for the interaction.

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