Upon validating my CSS using the W3 validator, an error message was displayed:
The pseudo-element ::first-letter is not allowed in this context css21 [first-letter]
This is the snippet of CSS triggering the error:
#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
}
Below is a portion of the HTML code causing the validation issue:
<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>
I'm puzzled as to why it's failing validation. From some research online, there seems to be an indication that chaining elements and then applying the first-letter style isn't permitted according to the specifications. However, this seems odd since the styling is rendering correctly on Chrome.