CSS selector for first child, if it happens to be of type-CodePudding

I have some HTML like so:

<li>
  Very
  <span >high</span>
  temperature
</li>

and

<li>
  <span >high</span>
  temperature
</li>

In the 2nd version I would like to capitalize the high so it reads as High. I do not want to capitalize the first instance.

So I'd like:

Very high temperature and High temperature

My idea was to apply some CSS to select .node-variable, where it's the first child, but not if it isn't. Is this possible?

CodePudding user response：

Yes, you can do this in pure CSS.

Using the CSS first-letter pseudo element seems to pick up the first letter even if that is in your span element:

<!doctype html>
<html>

<head>
  <style>
    li::first-letter {
      text-transform: uppercase;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      Very
      <span >high</span> temperature
    </li>
    <li>
      <span >high</span> temperature
    </li>
  </ul>
</body>

</html>

CodePudding user response：

You can't do that if it doesn't have the html tag around it.

CSS assign style based on html tag not the raw text.

I don't think there are any ways you could do that. You could do that but using Javascript.

If the raw text has html tag around it, you could use css first-child to do the effect you want, but you can't do that simple with css if you only have raw text.

span:first-child{
 text-transform: capitalize;
 }

<li>
  <span>Very</span>
  <span >high</span>
  temperature
</li>
<li>
  <span >high</span>
  temperature
</li>