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 way to do this in straight CSS or am I left wrapping the first word in a span to accomplish this

User · Answer

Pure CSS solution   Use the  first-line pseudo-class    display block  Width 40-100px     just enough for one word  depends on font size    Overflow visible     so longer words don t get clipped    float left     so it will flow with the paragraph     position relative     for typeset adjustments       Didn t test that  Pretty sure it will work fine for you tho  I ve applied block rules to pseudo-classes before  You might be stuck with a fixed width for every first word  so text-align center  and give it a nice background or  something to deal with the negative space   Hope that works for you      -Motekye

User · Answer

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  lt span class  first-word  gt

User · Answer

You have to wrap the word in a span to accomplish this

User · Answer

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

User · Answer

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

User · Answer

Insert Span Tag in your paragraph text  For Example-  lt p gt  lt span gt Hello lt  span gt My Name Is Dot lt  p and then style the first letter

User · Answer

There isn t a plain CSS method for this  You might have to go with JavaScript   Regex to pop in a span    Ideally  there would be a pseudo-element for first-word  but you re out of luck as that doesn t appear to work  We do have  first-letter and  first-line   You might be able to use a combination of  after or  before to get at it without using a span

User · Answer

Use the strong element  that is it s purpose    lt div id  content  gt       lt p gt  lt strong gt First Word lt  strong gt  rest of paragraph  lt  p gt   lt  div gt    Then create a style for it in your style sheet    content p strong       font-size  14pt

User · Answer

An easy way to do with HTML CSS  TEXT A  lt b gt text b lt  b gt    lt h1 gt text b lt  h1 gt    lt style gt      h1      the css style         h1 before  content  quot text A  p e first word  with different style quot           display  quot inline quot     the different css style      lt  style gt

User · Answer

Here s a bit of JavaScript and jQuery I threw together to wrap the first word of each paragraph with a  lt span gt  tag     function             content p   each function             var text   this innerHTML          var firstSpaceIndex   text indexOf               if  firstSpaceIndex  gt  0                var substrBefore   text substring 0 firstSpaceIndex               var substrAfter   text substring firstSpaceIndex  text length              var newText     lt span class  firstWord  gt     substrBefore     lt  span gt     substrAfter              this innerHTML   newText            else               this innerHTML     lt span class  firstWord  gt     text     lt  span gt                            You can then use CSS to create a style for  firstWord   It s not perfect  as it doesn t account for every type of whitespace  however  I m sure it could accomplish what you re after with a few tweaks   Keep in mind that this code will only execute after page load  so it may take a split second to see the effect

User · Answer

Same thing  with jQuery       links a   each function        var me     this       me html  me text   replace     w      lt strong gt  1 lt  strong gt               or      links a   each function        var me     this           t   me text   split           me html    lt strong gt   t shift     lt  strong gt    t join                  Via  Wizzud  on the jQuery Mailing List

[css] CSS to select/style first word

Examples related to css