How to style first letter of every word in SVG

This is the markup I’ve:

<svg>
    <defs>
      <path id="myPath" d="M 20 40 Q 260 240 400 500" />
    </defs>
    
    <use xlink:href="#myPath" fill="none" stroke="gold" />

    <text font-family="Courier New" font-size="36" stroke="red">
      <textPath href="#myPath">
        firstName middleName lastName
      </textPath>
    </text>
  </svg>

How do I select and style the first letter of every word in the textPath element?

I tried adding a span to each word with a class but that’s not working. Any suggestions?

what your describing does work. Copy this into codepen Html section.

<svg>
    <defs>
      <path id="myPath" d="M 20 40 Q 260 240 400 500" />
    </defs>
    
    <use xlink:href="#myPath" fill="none" stroke="gold" />

    <text font-family="Courier New" font-size="12" stroke="red">
      <textPath href="#myPath">
        <span class="first">f</span>irstName middleName lastName
      </textPath>
    </text>
  </svg>

copy this into your css section:

.first{
  color:red;
  font-size: 150%;
}

it works fine for me:

Now, the text is not along the path.

to style the first letter in a word in a textpath element along a path use the tspan element
https://www.w3.org/TR/SVG2/text.html#TextElement

HTML:

<svg>
    <defs>
      <path id="myPath" d="M 20 40 Q 260 240 400 500" />
    </defs>
    
    <use xlink:href="#myPath" fill="none" stroke="gold" />

    <text class="text" font-family="Courier New" font-size="36" stroke="red">
      <textPath  href="#myPath">
        <tspan stroke="green" class="FirstLetter">T</tspan>ext
      </textPath>
      
    </text>
  
  </svg>

css

.text {
  font-size: 13px;
  font-family: 'Raleway', sans-serif;
}
.FirstLetter{
  font-size: 23px;
}

output:

now you know how to style individual letters of text along a path. did my solution work for you?