Is it possible to apply CSS only to first letter of first paraphraph but only if paraphraph first child is text vs an element such as span?

Question

I am trying to figure out how to make B red in the following snippet.

I am using react-markdown to render HTML from markdown so, unfortunately, I can’t use HTML attributes.

p:first-of-type::first-letter {
  color: red;
}

<div>
  <p>
    <span>Aa</span>
  </p>
  <p>
    Bb
  </p>
  <p>
    Cc
  </p>
</div>

@PoulBak css has a `has` selector but no browser supports it yet. https://developer.mozilla.org/en-US/docs/Web/CSS/:has — ciekals11, Mar 06 '20 at 13:12

score 3 · Answer 1 · answered Mar 06 '20 at 13:07

The reason you cannot set F to be non-bold is because first-letter does not apply to inline elements.

You can demonstrate this easily by looking at the following snippet. The span is displayed as a block element and then correctly removes the bold from the first-letter:

p::first-letter {
  font-weight: bold;
}

p > span {
  display: block;
}

p > span::first-letter {
  font-weight: normal;
}

<div>
  <p>
    <span>
      Foo
    </span>
  </p>
  <p>
    Bar
  </p>
</div>

The reason is described further in the documentation here:

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Thanks for the answer. I needed `first-of-type` to target only the first occurrence. I updated my question. — sunknudsen, Mar 06 '20 at 13:24

Is it possible to apply CSS only to first letter of first paraphraph but only if paraphraph first child is text vs an element such as span?

1 Answers1

Linked