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


Tags: css,html,pseudo-element

Problem :

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>


Solution :

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

Example


    CSS Howto..

    How do i apply scroll for long horizontal background image?

    How to make width grow slowly when I add element?

    How to play specific keyframes with css animation

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    How do I position a div below an image with changing height?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to apply font anti-alias effects in CSS? [duplicate]

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    css: how to make the third div line up with the first div

    How to split the image using Javascript + CSS?

    How to make content appear under absolute position

    How can I get an element to stay within the browser's window width when its content is wider?

    How to change the background color of a line of user input in a textarea?

    How can I align this?

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to apply CSS to only immediate children of a certain class

    How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

    How should I set this caption over my image using CSS?

    How to set date search toolbar field width on autoresize

    How to color every second row using jQuery when the number of element in a row is variable?

    PHP Header Include (nav bar) not showing up [closed]

    How to place div on top of responsive rotated div?

    How to show an image on html page using only css?

    CSS how to vertically align text within a pseudo element

    How to hide header on scroll down, show on scroll up like linkedin menu

    How to make
    , , or list display tabular data as a table?

    How can I center using percentages?

    How to correctly set the column widths on my HTML table?

    How to change scrollbar in textarea input?

    CSS:How to properly remove border using CSS when border-radius is used?