Jump to content
alankellogg

First Letter and Specific Location

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...