CODEWITHSUNDEEP
htmlcss
AFetter
AFetter

Reputation: 3584

css first-letter exclude other tags

I have a page generated by WordPress which HTML looks similar to the HTML below. I would like to the first-letter of my div to have a different size, but when I try to add style for p:first-letter, all p's change sizes. My problem is I can't remove the p-tags because these are automatically created. 

<div class="div">
    <p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
    <p>Paragraph 2</p>
    <blockquote><p>Text blockquote</p></blockquote>
</div>

Any suggestions?

http://jsfiddle.net/hdNDh/

Upvotes: 0

Views: 1386

Answers (3)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Use the CSS child selector >.

E > F - Matches any F element that is a child of an element E.

jsFiddle

.div > p:first-letter {
    font-size:40px;
}

Edit: It seems I misunderstood your question at first, if you need the first letter of the div only, simply set the pseudo-class on the div instead of on the p.

jsFiddle

.div:first-letter {
    font-size:40px;
}

Edit2: As mentioned in the comments below, for this to work in FF you need:

.div > p:first-child:first-letter {
    font-size:40px;
}

jsFiddle

This seems strange/weird behaviour, so I have had a bit of a look around and it seems that Firefox is more particular about the :first-letter pseudo-class than other browsers. One example is that it doesn't count special characters to be letters, and therefore won't apply styles to them.

Results from testing a little bit just now: Firefox doesn't count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (even when there is no preceding text), whereas Chrome does count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (when there is no preceding text).

Upvotes: 5

Adrift
Adrift

Reputation: 59799

You can use:

.div > p:first-child::first-letter {
    font-size: 24px;
}

http://jsfiddle.net/hdNDh/2/

Upvotes: 1

isherwood
isherwood

Reputation: 61083

You need a combination of selectors:

http://jsfiddle.net/hdNDh/5/

.div > p:first-child:first-letter {
    font-size:40px;
}

Upvotes: 1

Related Questions