Jump to content

First Letter and Specific Location


Recommended Posts

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

article p:first-child:first-letter


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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...