CSS 2.1首字母未通过验证

Question

When I validate my CSS using the W3 validator, I get the following error message:

The pseudo-element ::first-letter can't appear here in the context css21 [first-letter]

This is what the CSS looks like:

#numbersWrapper p span::first-letter, #numbersWrapper p::first-letter, #lettersWrapper p span::first-letter, #lettersWrapper p::first-letter{
  font-size:17px;
} 

span{
  display:inline-block
}

And a section of my HTML:

<div id="lettersWrapper">
<h3 id="MSL">Maritme Signals: Letters</h3>
<div class="textWrapper">
<p>A - <span>Alpha</span>
<br/><img src= (REMOVED)
    alt="I have a diver down; keep well clear at slow speed."
    title="I have a diver down; keep well clear at slow speed."/></p>
<p>B - <span>Bravo</span>
<br/><img src= (REMOVED)
    alt="I am taking in, or discharging, or carrying dangerous goods."
    title="I am taking in, or discharging, or carrying dangerous goods."/></p>

Does anyone know why it won't validate? I've looked online a little and I think (if I've understood correctly), you can't chain elements and then use first-letter. However this doesn't seem right since it definitely works when viewing the page in Chrome.

Answer 1

CSS 2.1's pseudo-elements (including first-letter ) should only have one : . Your code should look like the following:

#numbersWrapper p span:first-letter, #numbersWrapper p:first-letter, #lettersWrapper p span:first-letter, #lettersWrapper p:first-letter{
  font-size:17px;
} 

span{
  display:inline-block
}