First Letter and Specific Location

[alankellogg]

How do I set CSS for the first letter in the first paragraph in an article or section?

[Ingolme]

The selector would be p:first-child:first-letter

[alankellogg]

The selector would be p:first-child:first-letter

This would limit the first-letter to the first paragraph in a section?

[dsonesuk]

No! To any first-child paragraph anywhere in any element, you would need to add section or section identifier class or id to target specific section.

[Ingolme]

If you're targeting the first paragraph in an article or section element you would use

article p:first-child:first-letter

or

section p:first-child:first-letter

 

However, if the paragraph is not the first element (for example, if it's preceded by an <h2>) it will not be targeted by that selector.

[dsonesuk]

 

However, if the paragraph is not the first element (for example, if it's preceded by an <h2>) it will not be targeted by that selector.

 

Well yeah :-), clue would be in the 'first-child' part.

[Ingolme]

Sometimes what people want to target is the first paragraph, not the first child. It's common for a heading to be the first child of a section element.

 

There's a :first-of-type selector that solves this problem, but it's supported by Internet Explorer 9 and above while :first-child is supported by Internet Explorer 7 and above. If you can afford to lose viewers who have IE 8 or 7 then it's safe to use the :first-of-type selector.

[dsonesuk]

Or

 

section h1:first-child + p:first-letter {color: red; }

 

Group with other headers if required.

[dsonesuk]

This will apply styling to any first child paragraph OR paragraph following first child (likely to be header h1 - h6) however obviously any addition element otherthan <p> between first child and paragraph will cause it to fail.

            section :first-child + p:first-letter {color: red; }
            section p:first-child + p:first-letter {color: black; } /* reset to default color to cancel above if first child is paragraph */
            section p:first-child:first-letter {color: red; }

.

Edited December 15, 2015 by dsonesuk

[dsonesuk]

GOOD ole CRAPPY IE below 9 does not support first-letter, so you end with same IE browser support restriction using first-of-type or first-child with first-letter.

[COBOLdinosaur]

Why would need the convoluted and iefficient mapping of the structure when a class will give maximum flexibility, reusability, and less maintenance hassle?

 

.someclass:first-letter {properties...

 

easy on the parser because it only has to process one token, easy on the rendering engine during the paint because it does not have to work through layers to test the dirty flag easy on the developer who does not have to worry about a broken presentation if the layout is changed.