CODEWITHSUNDEEP
csscss-selectorspseudo-element
joews
joews

Reputation: 30330

How do I select text except for the first letter?

I know that ::first-letter selects the first letter of a block-level element.

How can I select all text except the first letter?

I tried :not(::first-letter) but that didn't select anything.

Upvotes: 12

Views: 4166

Answers (1)

joews
joews

Reputation: 30330

:not can only be applied to simple selectors. Pseudo-elements aren't simple selectors, so you can't invert them.

You could apply the "non-first letter" styles to all of the text and reverse them for the first letter.

For example:

p {
  color: red;
  text-transform: uppercase;
}

p::first-letter {
  color: black;
  text-transform: none;
}
<p>red capitals except the first letter.</p>

Upvotes: 16

Related Questions