CSS to select/style first word

Question

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

Answer 1

Insert Span Tag in your paragraph text. For Example- <p><span>Hello</span>My Name Is Dot</p and then style the first letter.

Answer 2

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">.

Answer 3

Same thing, with jQuery:

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

or

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

(Via 'Wizzud' on the jQuery Mailing List)

Answer 4

Sadly even with the likes of CSS 3 we still do not have the likes of :first-word :last-word etc using pure CSS. Thankfully there's almost a JavaScript nowadays for everything which brings me to my recommendation. Using nthEverything and jQuery you can expand from the traditional Pseudo elements.

Currently the valid Pseudos are:

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

And using nth Everything we can expand this to:

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

Answer 5

An easy way to do with HTML+CSS:

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>