CODEWITHSUNDEEP
csspseudo-element
swati16
swati16

Reputation: 371

CSS Pseudo-Elements

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>

Upvotes: 1

Views: 218

Answers (2)

pcarvalho
pcarvalho

Reputation: 290

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/

Upvotes: 1

wog
wog

Reputation: 135

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>

Upvotes: 1

Related Questions