<p>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?</p>

[{'answer_id': 55620, 'author': 'hazzen', 'author_id': 5066, 'author_profile': 'https://Stackoverflow.com/users/5066', 'pm_score': 3, 'selected': False, 'text': '<p>You have to wrap the word in a span to accomplish this.</p>\n'}, {'answer_id': 55624, 'author': 'Robby Slaughter', 'author_id': 1854, 'author_profile': 'https://Stackoverflow.com/users/1854', 'pm_score': 8, 'selected': True, 'text': '<p>What you are looking for is a pseudo-element that doesn\'t exist. There is <code>:first-letter</code> and <code>:first-line</code>, but no <code>:first-word</code>.</p>\n<p>You can of course do this with JavaScript. Here\'s some code I found that does this: <a href="http://www.dynamicsitesolutions.com/javascript/first-word-selector/" rel="noreferrer">http://www.dynamicsitesolutions.com/javascript/first-word-selector/</a></p>\n'}, {'answer_id': 55627, 'author': 'Dale Ragan', 'author_id': 1117, 'author_profile': 'https://Stackoverflow.com/users/1117', 'pm_score': 2, 'selected': False, 'text': '<p>Use the <a href="http://www.w3schools.com/tags/tag_phrase_elements.asp" rel="nofollow noreferrer">strong</a> element, that is it\'s purpose:</p>\n\n<pre><code>&lt;div id="content"&gt;\n    &lt;p&gt;&lt;strong&gt;First Word&lt;/strong&gt; rest of paragraph.&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>Then create a style for it in your style sheet.</p>\n\n<pre><code>#content p strong\n{\n    font-size: 14pt;\n}\n</code></pre>\n'}, {'answer_id': 55628, 'author': 'Rob Allen', 'author_id': 149, 'author_profile': 'https://Stackoverflow.com/users/149', 'pm_score': 1, 'selected': False, 'text': "<p>There isn't a plain CSS method for this. You might have to go with JavaScript + Regex to pop in a span. </p>\n\n<p>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.</p>\n\n<p>You might be able to use a combination of :after or :before to get at it without using a span.</p>\n"}, {'answer_id': 57051, 'author': 'Prestaul', 'author_id': 5628, 'author_profile': 'https://Stackoverflow.com/users/5628', 'pm_score': 5, 'selected': False, 'text': '<p>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.  </p>\n\n<p>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 <code>&lt;span class="first-word"&gt;</code>.</p>\n'}, {'answer_id': 3139488, 'author': 'Jon Hadley', 'author_id': 161525, 'author_profile': 'https://Stackoverflow.com/users/161525', 'pm_score': 5, 'selected': False, 'text': '<p>Same thing, with jQuery:</p>\n\n<pre><code>$(\'#links a\').each(function(){\n    var me = $(this);\n    me.html( me.text().replace(/(^\\w+)/,\'&lt;strong&gt;$1&lt;/strong&gt;\') );\n  });\n</code></pre>\n\n<p>or</p>\n\n<pre><code>$(\'#links a\').each(function(){\n    var me = $(this)\n       , t = me.text().split(\' \');\n    me.html( \'&lt;strong&gt;\'+t.shift()+\'&lt;/strong&gt; \'+t.join(\' \') );\n  });\n</code></pre>\n\n<p>(Via \'Wizzud\' on the <a href="http://www.mail-archive.com/jquery-en@googlegroups.com/msg24374.html" rel="noreferrer">jQuery Mailing List</a>)</p>\n'}, {'answer_id': 8243675, 'author': 'Motekye Guakein', 'author_id': 1062088, 'author_profile': 'https://Stackoverflow.com/users/1062088', 'pm_score': 3, 'selected': False, 'text': "<p>Pure CSS solution:</p>\n\n<p>Use the :first-line pseudo-class. </p>\n\n<pre><code>display:block;\nWidth:40-100px; /* just enough for one word, depends on font size */\nOverflow:visible; /* so longer words don't get clipped.*/\nfloat:left; /* so it will flow with the paragraph. */\nposition:relative; /* for typeset adjustments. */\n</code></pre>\n\n<p>Didn't test that. Pretty sure it will work fine for you tho.\nI've applied block rules to pseudo-classes before.\nYou might be stuck with a fixed width for every first word,\nso text-align:center; and give it a nice background or \nsomething to deal with the negative space.</p>\n\n<p>Hope that works for you. :)</p>\n\n<p>-Motekye</p>\n"}, {'answer_id': 14968908, 'author': 'user1171848', 'author_id': 1171848, 'author_profile': 'https://Stackoverflow.com/users/1171848', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s a bit of JavaScript and jQuery I threw together to wrap the first word of each paragraph with a <code>&lt;span&gt;</code> tag.</p>\n\n<pre><code>$(function() {\n    $(\'#content p\').each(function() {\n        var text = this.innerHTML;\n        var firstSpaceIndex = text.indexOf(" ");\n        if (firstSpaceIndex &gt; 0) {\n            var substrBefore = text.substring(0,firstSpaceIndex);\n            var substrAfter = text.substring(firstSpaceIndex, text.length)\n            var newText = \'&lt;span class="firstWord"&gt;\' + substrBefore + \'&lt;/span&gt;\' + substrAfter;\n            this.innerHTML = newText;\n        } else {\n            this.innerHTML = \'&lt;span class="firstWord"&gt;\' + text + \'&lt;/span&gt;\';\n        }\n    });\n});\n</code></pre>\n\n<p>You can then use CSS to create a style for <code>.firstWord</code>.</p>\n\n<p>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.</p>\n\n<p>Keep in mind that this code will only execute after page load, so it may take a split second to see the effect.</p>\n'}, {'answer_id': 29242398, 'author': 'Simon Hayter', 'author_id': 1892635, 'author_profile': 'https://Stackoverflow.com/users/1892635', 'pm_score': 4, 'selected': False, 'text': '<p>Sadly even with the likes of CSS 3 we still do not have the likes of <code>:first-word</code> <code>:last-word</code> etc using pure CSS. Thankfully there\'s almost a JavaScript nowadays for everything which brings me to my recommendation. Using <a href="https://github.com/FWeinb/nthEverything" rel="noreferrer">nthEverything</a> and <a href="https://jquery.com/" rel="noreferrer">jQuery</a> you can expand from the traditional Pseudo elements.</p>\n\n<p>Currently the valid Pseudos are: </p>\n\n<ul>\n<li><code>:first-child</code></li>\n<li><code>:first-of-type</code></li>\n<li><code>:only-child</code></li>\n<li><code>:last-child</code></li>\n<li><code>:last-of-type</code></li>\n<li><code>:only-of-type</code></li>\n<li><code>:nth-child</code></li>\n<li><code>:nth-of-type</code></li>\n<li><code>:nth-last-child</code></li>\n<li><code>:nth-last-of-type</code></li>\n</ul>\n\n<p>And using nth Everything we can expand this to:</p>\n\n<ul>\n<li><code>::first-letter</code></li>\n<li><code>::first-line</code></li>\n<li><code>::first-word</code></li>\n<li><code>::last-letter</code></li>\n<li><code>::last-line</code></li>\n<li><code>::last-word</code></li>\n<li><code>::nth-letter</code></li>\n<li><code>::nth-line</code></li>\n<li><code>::nth-word</code></li>\n<li><code>::nth-last-letter</code></li>\n<li><code>::nth-last-line</code></li>\n<li><code>::nth-last-word</code></li>\n</ul>\n'}, {'answer_id': 40359849, 'author': 'Ashique', 'author_id': 7047794, 'author_profile': 'https://Stackoverflow.com/users/7047794', 'pm_score': -1, 'selected': False, 'text': '<p>Insert Span Tag in your paragraph text. For Example-\n<code>&lt;p&gt;&lt;span&gt;Hello&lt;/span&gt;My Name Is Dot&lt;/p</code>\nand then style the first letter.</p>\n'}, {'answer_id': 64837372, 'author': 'Noelia García', 'author_id': 14639208, 'author_profile': 'https://Stackoverflow.com/users/14639208', 'pm_score': 1, 'selected': False, 'text': '<p>An easy way to do with HTML+CSS:</p>\n<pre><code>TEXT A &lt;b&gt;text b&lt;/b&gt;\n\n&lt;h1&gt;text b&lt;/h1&gt;\n\n&lt;style&gt;\n    h1 { /* the css style */}\n    h1:before {content:&quot;text A (p.e.first word) with different style&quot;;    \n    display:&quot;inline&quot;;/* the different css style */}\n&lt;/style&gt;\n</code></pre>\n'}, {'answer_id': 69404852, 'author': 'M K', 'author_id': 16383579, 'author_profile': 'https://Stackoverflow.com/users/16383579', 'pm_score': 0, 'selected': False, 'text': '<p>You can select first Letter or Line</p>\n<pre><code>p::first-letter {\n  font-weight: bold;\n  color: red;\n}\n</code></pre>\n<p><a href="https://css-tricks.com/almanac/selectors/f/first-letter/" rel="nofollow noreferrer">https://css-tricks.com/almanac/selectors/f/first-letter/</a></p>\n'}, {'answer_id': 71456785, 'author': 'Schäfer', 'author_id': 9484755, 'author_profile': 'https://Stackoverflow.com/users/9484755', 'pm_score': 0, 'selected': False, 'text': "<p>I find JavaScript being the best way to achieve this.\nBelow is the JS code to set an element's First Word as the element's innerText</p>\n<pre><code>let text = document.querySelector('.menu_text');\nconst words = menu_text.innerHTML.toString().split(' ');\ntext.innerText = words[0];\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/55612', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/204/']