How to use a CSS :first-letter pseudo-element in a <div> paragraph

Question

I'm trying to use a CSS :first-letter pseudo-element in a web page to enlarge and colorize the first letter of a paragraph (W), the only thing is that it's in a DIV tag and it's not displaying correctly. I have been to W3C schools and looked at the following here at Stackoverflow (css selector: first paragraph's first letter inside a div and css first-letter exclude other tags), but these don't seem to resolve my problem (more than likely I don't have the CSS setup correctly is my guess). Any help will be appreciated. Thanks.

Here is the CSS I'm using:

div homepara:first-letter {
font-size: 36px;
color: darkblue;
}

Here is the HTML I'm using:

<div class="homepara">Welcome to This Test Page.
</div>

Answer 1

Try this: div.homepara:first-letter. When you want to address a div with a class add a . between then.

Example

Answer 2

Your CSS selector isn't written correctly. Should be:

div.homepara:first-letter {
  font-size: 36px;
  color: darkblue;
}

Answer 3

div.homepara:first-letter  

you just missed a '.' before the class name and there should not be space between the .classname and the div

i.e.. div.classname

DEMO