Psuedo Class Selectors Within ID - html

Question

I would appreciate a little assistance working with Psuedo Selectors for an ID within CSS. I cannot seem to display the first line of an ID in small caps. A snippet of both my CSS and the corresponding HTML is included for reference.
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
}
#introtext:first-line {
font-variant: small-caps;
}
HTML:
<div id="introtext"><span id="introcap">H</span><span id="introtext.first">ere you will
find links to Scouting related websites and forms.</div>

Answer 1

Perhaps...
...your expectations are incorrect (and I know your code has an error). While I agree with the comments here that your code is working as expected, I am speculating you are attempting something different.
Did you want the first sentence in small caps?
I noticed in your code you have the "opening" tag of <span id="introtext.first"> but you failed to put the closing tag for that </span>. This is an error. However, if your intent is to have the whole first sentence to become small-caps, your code will still not work because the :first-line pseudo-element does not look at the first sentence, but the first-line (which varies based off of the container width).
Additionally
It is best to not use a . in an id, since the . is used for designating classes. And perhaps a class is what you really want anyway.
Finally, A Solution?
If my speculations about your goals are correct, then I recommend doing the following (keeping your #introtext css the same, but changing the html and :first-line code), as demonstrated in this FIDDLE.
HTML
<div id="introtext">
<span id="introcap">H</span><span class="first-sentence">ere you will find
links to Scouting related websites and forms.</span> More text to follow
in a second sentence. And a third. Blah. Blah.
</div>
CSS
.first-sentence {
font-variant: small-caps;
}
Although
It almost appears as though you intend this to be a header (since the text is centered), so maybe something like this is more semantic and also eliminates the need for your leading "H" to be separate (unless you want OLD browser support). Here is its demo FIDDLE.
HTML
<div>
<h2 id="introtext">Here you will find links to Scouting related websites
and forms.</h2> More text to follow in a second sentence. And a third.
Blah. Blah.
</div>
CSS
#introtext {
margin: 0px 0px 20px 0px;
background: transparent;
font-face: "arial black";
font-size: 22px;
font-weight: bold;
letter-spacing: .1em;
line-height: 1;
text-align: center;
font-variant: small-caps; /*<-- moved this to here*/
}
#introtext::first-letter {
font-variant: none; /*<-- reset the pseudo-element to normal */
}