Page MenuHomePhabricator

Support styling direct children of .mw-parser-output
Open, Needs TriagePublicFeature

Description

Feature summary:
I would like > selector to be parsed into .mw-parser-output > selector.

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
I would like to add a left margin to section content:

p, ul, ol { left-margin: 6ex }

Unfortunately, sub-lists are also selected.

Benefits:
I currently need the following reset as a workaround:

ul ul, ul ol,
ol ul, ol ol
{ left-margin: 3ex }

Even worse if you would also like resetting description lists or other elements.

Event Timeline

What prevents you from wrapping the whole page contents in another container to select?

This is indeed a common workaround; but I dislike adding another <div class="wrapper"> in wikitext of all pages where the templateStyles is included, whereas there is already a <div class="mw-parser-output"> which could be used for this purpose.

I would like > selector to be parsed into .mw-parser-output > selector.

Definitely not; it's invalid CSS, which makes it confusing and breaks syntax highlighting in the editor.

We could skip prefixing of selectors which start with .mw-parser-output > - pretty sure that came up in another task already.

We could skip prefixing of selectors which start with .mw-parser-output > - pretty sure that came up in another task already.

T271588. Could make it so that only some combinators are supported like > as you suggest, indeed (but would need to dodge supporting naked .mw-parser-output and e.g. .mw-parser-output +, which doesn't seem difficult). I don't really understand what need is motivating Pols here so I can't say whether this task is more motivational.

That was the one, thanks. Styling .mw-parser-output can be somewhat security-sensitive; styling its children isn't. It would complicate the logic of a security-sensitive operation (selector prefixing) though, so I'm not sure it's worth it. I think Parsoid will at some point introduce <section> tags wrapping most content, so this problem will go away eventually, anyway.

A kind of subset of T271588, indeed.

The use cases are on Meta-Wiki, where project pages often define a specific layout (example). Having <section> tags would probably workaround this issue, indeed.

On that particular page, you could use the sibiling combinator with .mw-heading2 ~ p {}?

On that particular page, you could use the sibiling combinator with .mw-heading2 ~ p {}?

Indeed, .mw-heading2 ~ ul, .mw-heading2 ol { margin-left: 6ex; } is also a nice workaround as soon as there is at least one h2; thank you.