Is it possible to style anonymous flex items explicitly?

Question

I'm in the early stages of grasping the basic flexbox concepts. The Using CSS Flexible Boxes article at MDN states (emphasis mine):

Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

That means that the following mark-up automatically provides three items to play with:

p, em {
  margin: 1em;
  padding: 1em;
}
p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
  
}
em {
  border: 1px solid orange;
  display: inline-flex;
}

<p>This is a <em>just</em> a test.</p>

However, I'm still unsure about the possibilities of these anonymous items outside flexbox model itself (if any). It's awesome not to need to wrap "This is a" and "a test" in bogus <span> tags for layout but, is there a way to apply regular styles to them? A pseudo-element or something similar? Could I, for instance, set a different colour to each one of the three parts the paragraph is divided into?

Michael Benjamin · Accepted Answer · 2020-06-13T17:11:37.717

4

No. Anonymous boxes cannot be directly targeted for CSS styling. CSS styles need a "hook" in the HTML to attach to. That hook is an HTML tag. Without the tag, CSS has nothing to target. This concept applies across box models, including flex and block formatting contexts.

More about anonymous boxes:

From the CSS spec:

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

The flexbox specification provides for similar behavior.

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

edited Jun 13 '20 at 17:11

answered Mar 26 '17 at 11:15

Michael Benjamin

265,915
79
461
583

Now I think about it, it certainly makes sense. – Álvaro González Mar 26 '17 at 11:19
4

... and that's why they're called "anonymous" boxes. – BoltClock Mar 26 '17 at 11:24
1

So it's kinda a virtual container for the text nodes directly contained in a flex container? Correct? Thank you! – tonix Jun 13 '20 at 17:14

score 3 · Answer 2 · answered Mar 26 '17 at 11:15

3

Obviously not, since otherwise all text in the following example would have to be styled like the word "just":

p,
em {
  margin: 1em;
  padding: 1em;
}

p {
  border: 1px solid blue;
  display: flex;
  justify-content: space-between;
}

em {
  border: 1px solid orange;
  display: inline-flex;
}

p * {
  color: green;
  font-size: 2em;
}

<p>This is a <em>just</em> a test.</p>

answered Mar 26 '17 at 11:15

Johannes

53,485
15
52
104

Thank you for the experimental proof. While you were composing your answer I finally found a reference in the most obvious place (the W3C recommendation), I've added an answer with the link. – Álvaro González Mar 26 '17 at 11:18

score 1 · Answer 3 · answered Mar 26 '17 at 11:16

No, it isn't possible.

The W3C Candidate Recommendation says:

Note also that the anonymous item’s box is unstyleable, since there is no element to assign style rules to. Its contents will however inherit styles (such as font settings) from the flex container.

score 0 · Answer 4 · answered Mar 07 '19 at 13:19

The answer is still 'no', but a little but often-needed „addition“

display: flex has a bigger effect on the children then on the styled element itself (which will be block, or whatever it's parent and the flex:-property (not value) dictates). Also the accompanying align-items: center actually affects the children.

tl;dr; anonymous inner element are affected by flex styling, behaving like an element on their own (just not by others styling attempts). Codepen

<i> + <div> hello </div><div> there </div></i>

Sass:

i
  background: #faa
  padding: 12
  padding: 0 20px
  height: 100px

  // affects innner text
  display: flex
  align-items: center

  * // affects only actual tags
    background: cyan

Is it possible to style anonymous flex items explicitly?

4 Answers4

Linked