CODEWITHSUNDEEP
cssflexbox
Álvaro González
Álvaro González

Reputation: 146588

Is it possible to style anonymous flex items explicitly?

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?

Upvotes: 5

Views: 1037

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371929

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.

Upvotes: 5

Frank N
Frank N

Reputation: 10416

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.

enter image description here

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

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146588

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.

Upvotes: 1

Johannes
Johannes

Reputation: 67778

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>

Upvotes: 3

Related Questions