I am getting some external html page where all the data is ing in lowercase. with css, i tried to capitalize the first intial of the plete label tag but i am unable to do it, it makes plete uppercase like this:

.fontmodal {
     text-transform:capitalize !important;
}

but that did not worked...

<table><fieldset><div><label>DATA</label></div></fieldset></table> - This is the current Structure

Now i am trying to same in jquery, i am not sure what and how to proceed.

Here is my code what i am trying:

$('#Container2').find("table>label").css(textTransform,'capitalize');

I am getting some external html page where all the data is ing in lowercase. with css, i tried to capitalize the first intial of the plete label tag but i am unable to do it, it makes plete uppercase like this:

.fontmodal {
     text-transform:capitalize !important;
}

but that did not worked...

<table><fieldset><div><label>DATA</label></div></fieldset></table> - This is the current Structure

Now i am trying to same in jquery, i am not sure what and how to proceed.

Here is my code what i am trying:

$('#Container2').find("table>label").css(textTransform,'capitalize');

• javascript
• jquery
• html
• css

• text transform.. uppercase.. – Pogrindis Commented Dec 16, 2014 at 13:20
• @Pogrindis It's capitalize for the first letter, uppercase is the whole text – Mathew Thompson Commented Dec 16, 2014 at 13:20
• 1 Your HTML doesn't show any element with the fontmodal class. Could you write a fiddle ? – Denys Séguret Commented Dec 16, 2014 at 13:22
• 2 The question is misleading. You say that the data is ing in lowercase but the posted code says something different. – Hashem Qolami Commented Dec 16, 2014 at 13:30
• 1 You have not corrected the question, and your markup is invalid. The actual markup is relevant, since it affects the suitability of different approaches. And you should not confuse the issue by referring to jQuery when this is apparently a matter of HTML and CSS only (and once solved, trivial to implement in jQuery if needed). – Jukka K. Korpela Commented Dec 16, 2014 at 13:46

5 Answers 5

See below:

label {
  text-transform: lowercase;
}

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

<table>
  <fieldset>
    <div>
      <label>DATA</label>
    </div>
  </fieldset>
</table>

If you can't change the HTML and need to apply the capital letter on the first letter, you need to change the default display property of the <label> tag :

:first-letter :

has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. (source MDN)

label {
  display: inline-block;
  text-transform: lowercase;
}
label::first-letter {
  text-transform: capitalize;
}

<table>
  <fieldset>
    <div>
      <label>DATA</label>
    </div>
  </fieldset>
</table>

You simplify it and do something like below.

$(document ).ready(function() {
$("label").addClass("capitalizer"); // Adjust specificity as needed
});

.capitalizer {
    font-weight: bold;
    font-size: 72px;
    display: inline-block;
    color: red;
    } 

.capitalizer::first-letter {
    text-transform: capitalize;
    } 

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label>data</label>
    </div>

You can achieve this using the CSSS selector :first-letter.

The subtly I have found is that it doesn't appear to be supported on the <label/> tag (didn't work in my demo code, anyhow)

But we can get round that:

label {
    text-transform: lowercase;
}
div:first-child:first-letter {
    text-transform: uppercase;
    color: red;
}

DEMO: http://jsfiddle/30trmm3w/1

I don't get what's wrong a simple CSS rule should do the trick :

#Container2 label {
  text-transform: capitalize;
}