pseudo- element ::selection doesn't work on the first letter if i use ::first-letter. CSS-CodePudding

After using p::first-letter I cant make p::selection, because it works only to other letters, not including first.picture of site. How can I gat access to the selection of first letter?

I've tried to do smth like this: p::first-letter::selection{}, but as we know we can't use more than one pseudo element.

CodePudding user response：

Unfortunately you are right and there is no way of chaining pseudo elements. As far as I know the only way to achieve what you are trying to do is by wrapping the first letter in a <span> or similar and put the styling onto there.

If your content comes from a CMS or similar you'll probably also need some JavaScript to dynamically render it around the first letter.

span {
  font-size: 2rem;
}

::selection {
  color: red;
}

<p>
 <span>H</span>ello
</p>