0

I am trying to style the first word of a paragraph, but it is not working. Can anyone help. I can style the first letter, but not the first word. I have reasons to not use <span> to do this. JSFiDDLE HERE

.product-title {
  width: 100vw;
  text-align: right;
  font-size: 4.5vw;
  letter-spacing: -0.05em;
  color: #ffffff;
  "

}
#first-letter-here p::first-letter {
  font-family: arial;
  font-weight: 900;
  font-size: 3em;
}
#first-word-here p::first-word {
  font-family: arial;
  font-weight: 900;
  font-size: 3em;
}
<div id="first-letter-here">
  <p>
    Milk and cookies.
  </p>
</div>

<div id="first-word-here">
  <p>
    Milk and cookies.
  </p>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Eddy
  • 566
  • 2
  • 8
  • 28
  • 1
    There is no `::first-word` psuedo-element. – Paulie_D Oct 14 '16 at 12:08
  • http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word - `#first-word-here>p:before { font-family: arial; font-weight: 900; font-size: 3em; content:"Milk" }` – mplungjan Oct 14 '16 at 12:09

2 Answers2

0

there is no pseudo class for :first-word in css they only have :first-line and :first-letter if you need to style that you can do it by adding span tag and applying class to first word.

http://www.w3schools.com/css/css_pseudo_elements.asp

hackthecodes
  • 1
  • 1
-3

as far as i know, there isn't anyway to do this with css, but you can do it with javascript: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

markus rytter
  • 140
  • 1
  • 3
  • 13
  • Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Oct 14 '16 at 12:08