CSS - first letter capitalize-CodePudding

It is possible to make ONLY the first character set to uppercase with css? (e.g: :first-char selector)

in short: if the text start with a number, do not apply the conversion (capitalize) afterwards

table.evenOdd tr td::first-letter{
        text-transform:capitalize;
    }

the table

<table >
    <tr>
        <td style="width: 50%">question 1</td>
        <td><b>100 mm</b></td>
    </tr>
    <tr>
        <td>question 2</td>
        <td><b>Success</b></td>
    </tr>
    <tr>
        <td>question 3</td>
        <td><b>42 kilometer</b></td>
    </tr>  
</table>

and the result is
Question 1 | 100 Mm -- nok i want mm
Question 2 | Success -- ok
Question 3 | 42 Kilometer -- nok i want kilometer

CodePudding user response：

::first-letter only works on block-level elements.

From MDN's documentation:

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Set your spans to inline-block for this to work:

span {
  display: inline-block;
}

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

<span>success</span>
<span>Warning</span>
<span>10 cm</span>
<span>128 kilometer</span>

CodePudding user response：

Try this

span::first-letter {
    text-transform: uppercase;
}

CodePudding user response：

Let's try this:

.uppercase {
  display: inline-block; 
  text-transform: lowercase;
}

.uppercase:first-letter {
  text-transform: uppercase
}

<span >success</span> 
<span >Warning</span> 
<span>10 <span >cm</span></span> 
<span>128 <span >kilometer</span></span>