css - CSS3 target first paragraph inside a few container elements without using "of-type" -


How can I style the first letter of this paragraph without using the "nth-of-type" proxy in this code ? Selectors?

  & lt; Div id = "content-wrapper" & gt; & Lt; Div id = "breadcrumbs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Articles & gt; & Lt; Section & gt; & Lt; H2 & gt; Page name & lt; / H2 & gt; & Lt; H3 & gt; Title & lt; / H3 & gt; & Lt; P & gt; Here, I want to style the first letter here & lt; / P & gt; & Lt; / Section & gt; & Lt; / Article & gt; & Lt; / Div & gt;    

If you are trying to support earlier versions of IE, Fear is & lt; Span & gt; The first letter in the tag is to wrap up and it is known in style in this way.

  & lt; P & gt; & Lt; Span class = "letter" & gt; H & lt; / Span & gt; Formerly, I want to style the first letter here & lt; / P & gt;   

Or if your content is dynamic, you can & lt; Span & gt; You can use jQuery to wrap the first letter in , and then the style will be applied. / P>

  text = $ ('p'). Html (); First = $ ('& lt; span & gt;' + text.charAt (0) + '& lt; / span & gt;'). AddClass ('Letter'); .. $ ('P') HTML (text.substring (1)) forward (first);   

Hope it helps.

Comments