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 fo

Solution 1:

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 countthe 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).

Solution 2:

You need a combination of selectors:

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

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

Solution 3:

You can use:

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

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