how to inherit from nonparent element

[Nick Levinson]

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?

[Shikkediel]

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.

[Paulie_D]

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/

[Nick Levinson]

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.

[Paulie_D]

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.

[Nick Levinson]

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.

[Author]

Posts