Menu
This one has me kind of stumped. I want to make the first word of all the paragraphs in my #content div at 14pt instead of the default for the paragraphs (12pt). Is there a way to do this in straight CSS or am I left wrapping the first word in a span to accomplish this?
697
Solutions with CSS and HTML If you want to change the color of the first word of a text, you can use the CSS :before pseudo-element, which is used to add any element. Its value is defined with the content property. If it is not used, the content will not be generated and inserted.
The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
If you're willing to branch into CSS3, the first-of-type selector is exactly what you're trying to accomplish. first-of-type will always select the first occurrence of an element at any level. So for your case, it would style the first <h2> at any level in the markup tree.
What you are looking for is a pseudo-element that doesn't exist. There is :first-letter and :first-line, but no :first-word.
You can of course do this with JavaScript. Here's some code I found that does this: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
147
I have to disagree with Dale... The strong element is actually the wrong element to use, implying something about the meaning, use, or emphasis of the content while you are simply intending to provide style to the element.
Ideally you would be able to accomplish this with a pseudo-class and your stylesheet, but as that is not possible you should make your markup semantically correct and use <span class="first-word">.
28
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
