CSS Pseudo-Elements

Question

This code explains pseudo elements first-letter and first-line and it's working fine.

<html>
    <head>
    <title>Practice CSS :first-letter pseudo element </title>
    </head>

    <style type="text/css">
    <!--
    p:first-letter { font-size: 3em; text-color:red; }
    p.normal:first-letter { font-size: 40px; color:red; }

    p:first-line { text-decoration: none; }
    p.line:first-line { text-decoration: underline; }

    -->
    </style>

    <body>

    <p class="normal"> First character of this paragraph will 
    be normal and will have font size 40 px;</p>

    <p class="line">The first character of this paragraph will be 3em big
    and in red color as defined in the CSS rule above. Rest of the
    characters in this paragraph will remain normal. This example 
    shows how to use :first-letter pseudo element to give effect to
    the first characters of any HTML element.</p>

    </body>
</html>

Can I use both this pseudo elements first-letter and first-line on 'p' tag at the same time, as in code give below?

<p class="normal"  "line"> First character of this paragraph will 
be normal and will have font size 40 px;</p> 

<p >The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseudo element to give effect to
the first characters of any HTML element.</p>

pcarvalho · Accepted Answer · 2012-07-28 13:10:05Z

1

like @wog said, you need to join the classes like class="normal line". here's a jsfiddle to show that yes, you can. http://jsfiddle.net/3DnZD/

answered Jul 28, 2012 at 13:10

pcarvalho

2906 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

swati16 Over a year ago

Hi Peteroak, thanks once agian for suggesting this site.I personally feels this will be very useful to me.

pcarvalho Over a year ago

:)) i love it too. its perfect to test new things

wog · Accepted Answer · 2012-07-28 13:09:03Z

If you want to have class "chaining" in CSS you have to put the class names space seperated in quptation marks:

<p class="normal line">Blah 42</p>

EDIT: "chaining" means, that the second given class name might overwrite an attribute from the first given class. If you want to make it without class names, you have to change your CSS to:

p:first-line {blah...}
p:first-letter {blah..}

I wold recommend that you do it this way. Having a bunch of css classes will make your markup really unreadable. If you want to have this in especially one paragraph you should see if you can add specific CSS definitions to the parent element:

p#myEmphasedParagraph:first-line {blah...}
p#myEmphasedParagraph:first-letter {blah...}

in html then this:

<p id="myEmphasedParagraph">blah</p>

Collectives™ on Stack Overflow

CSS Pseudo-Elements

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related