Menu
I'm trying to apply CSS styles to some HTML snippets that were generated from a Microsoft Word document. The HTML that Word generated is fairly atrocious, and includes a lot of inline styles. It goes something like this:
<html> <head></head> <body> <center> <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p> <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p> </body> </html> ...and very simply, I would like to style the first letter of the title section. It just needs to be larger and in a different font. To do this I am trying to use the :first-letter selector, with something kind of like:
p b span:first-letter { font-size: 500px !important; } But it doesn't seem to be working. Here's a fiddle demonstrating this:
http://jsfiddle.net/KvGr2/
Any ideas what is wrong/how to get the first letter of the title section styled correctly? I can make minor changes to the markup (like adding a wrapper div around things), though not without some difficulty.
997
In CSS, the ::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements. In CSS a ::first-line pseudo-element is similar to an inline-level element if its 'float' property is 'none'; otherwise, it is similar to a floated element.
::first-letter does not work on inline elements such as a span . ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block . Therefore it's better to apply ::first-letter to a p instead of a span .
::first-letter does not work on inline elements such as a span. ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block.
Therefore it's better to apply ::first-letter to a p instead of a span.
p::first-letter {font-size: 500px;} or if you want a ::first-letter selector in a span then write it like this:
p b span::first-letter {font-size: 500px !important;} span {display:block} MDN provides the rationale for this non-obvious behaviour:
The
::first-letterCSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line....
A first line has only meaning in a block-container box, therefore the
::first-letterpseudo-element has only an effect on elements with adisplayvalue ofblock,inline-block,table-cell,list-itemortable-caption. In all other cases,::first-letterhas no effect.
Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
