alankellogg Posted December 12, 2015 Share Posted December 12, 2015 How do I set CSS for the first letter in the first paragraph in an article or section? Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2015 Share Posted December 12, 2015 The selector would be p:first-child:first-letter Link to comment Share on other sites More sharing options...
alankellogg Posted December 12, 2015 Author Share Posted December 12, 2015 The selector would be p:first-child:first-letter This would limit the first-letter to the first paragraph in a section? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 12, 2015 Share Posted December 12, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 13, 2015 Share Posted December 13, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2015 Share Posted December 14, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 15, 2015 Share Posted December 15, 2015 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 More sharing options...
dsonesuk Posted December 15, 2015 Share Posted December 15, 2015 Or section h1:first-child + p:first-letter {color: red; } Group with other headers if required. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 15, 2015 Share Posted December 15, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 15, 2015 Share Posted December 15, 2015 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. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted December 15, 2015 Share Posted December 15, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now