What's the difference between p ::first-letter and p::first-letter? [duplicate]

Question

What's the difference between p ::first-letter and p::first-letter?

p::first-letter can successfully select the first letter inside a paragraph, but p ::first-letter cannot.

Answer 1

The selector p::first-letter selects the first letter inside the p whereas the p ::first-letter selects the first letter within the child elements of the p.

p ::first-letter is equivalent to p *::first-letter. The below is what the specs say:

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

Note: Even though the selector (p ::first-letter) itself points to the first letter inside all child elements, the ::first-letter selector works only on block or inline-block elements and hence wouldn't work on a span unless its display is modified.

p ::first-letter {
  color: red;
}
p::first-letter {
  color: blue;
}

span{
  display: inline-block;
}

<p>Some text <span>inside a span</span> and <span>inside this span too</span>
</p>