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 to make an inline element appear on new line, or block element not occupy the whole line?

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    How to hide a
    item with CSS?

    How to Validate HTML, CSS and JS in Eclipse IDE

    How to fade in and out a CSS “:after” pseudo element when adding or removing a class

    How to create an email template from a responsive website?

    How can I use JQuery toggle for multile DIVs?

    How to remove spacing between the top of a border and a div [closed]

    How to style every odd p element after h2 element occured in css?

    Pesudo Class and Css Role how to apply theme

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to remove CSS spaghetti in legacy web app?

    how to set the font-family like a digital clock CSS? [closed]

    How to fire a new css animation when the element already has one?

    How to do a darker background image in css3 and stretch it?

    How to hide the rest of the contents using simple CSS and Javascript

    How to find Sharepoint 2013 CSS Classes?

    How to make responsive video background in DIV container with dynamic height?

    How to implement a finished coded html/css page into CMS [closed]

    How to write Safari(5) specific CSS?

    How to make a content property in css use php

    How to apply picture for submit button

    How to prevent CSS in dynamically added HTML content from overriding my JSP's CSS content?

    How to display certain content underneath another block of content

    CSS: How to select all rel atributes

    how to set a default prompt when nothing selected for “select” using css

    How to pause css animation?

    CSS or Jquery how to position image in the middle of an li element?

    How can I make these floated divs wrap properly?