One of CSS properties doesn't work with Jquery : "first-letter"

Question

This query do all the transformations but not the "first-letter", is there a specific way to do it:

here is my script:

 function()
        {
            var o = this;

                $('li').on('mouseover', function(event){

                    var el = $(event.target).parent().children()['1'];
                      $(el).css({
                          "background" : "#483D8B",
                          "letter-spacing" : "2px",
                          "text-transform" : "uppercase"
                              });

                });

                $('li').on('mouseout', function(event){
                    var el = $(event.target).parent().children()['1'];
                    $(el).css({

                      "letter-spacing" : "0px",
                      "text-transform" : "lowercase",
                      "first-letter" : "uppercase",
                      "background" : "#4682B4"
                         });

                });

            },

and the concerned Html:

s[i++] = '<li>';
s[i++] =  '<img id=\"'+  ConcernedText[j].name +'\" src="../renderer/bundles/' + ConcernedText[j].icon + '" width="268" height="120" style="display:block"\" />';
s[i++] =  '<a>'+ ConcernedText[j].name + '</a>';
s[i++] = '</p><!----><p>'
s[i++] = '</li>';

is there another way while calling this property like a:first-letter{ text-transform : uppercase }, if so what should be the syntax in Jquery?

`first-letter` is a pseudo-element, not a property. It's therefore not something jQuery can set via `css()`. — Mitya, Aug 03 '16 at 14:35
http://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery — Bert, Aug 03 '16 at 14:35
is there a suggestion to turn the first letter uppercase in my case ? — Simo, Aug 03 '16 at 14:36
Yes but not via JS - you'd do it via CSS. You can't set styles on pseudo elements via JS, unless you go the very lengthy way of using the stylesheet DOM API and create on-the-fly stylesheets. — Mitya, Aug 03 '16 at 14:41

Mila · Answer 1 · 2016-08-03T14:49:47.397

1

I would recommend to separate CSS and JS by just adding/removing classes which are described in your CSS. In that case your first-letter will work within CSS. Besides, I am not sure why you would create var el if you could just use $(this). For example:

$('li').on('mouseout', function(event){
  $(this).addClass('lowercased');
});

In your CSS file:

.lowercased {
  "letter-spacing" : "0px",
  "text-transform" : "lowercase",
  "background" : "#4682B4"
}


.lowercased a::first-letter {
  "text-transform" : "uppercase"
}

Make sure to remove the class on an opposite event:

$('li').on('mousein', function(event){
  $(this).removeClass('lowercased');
});

edited Aug 03 '16 at 14:49

answered Aug 03 '16 at 14:48

Mila

598
4
9

As discussed, `first-letter` is a pseudo element, not a CSS property. If it were, this approach would be identical in effect to what the OP is already doing, i.e. setting a style. – Mitya Aug 03 '16 at 14:49
Thanks @Utkanos. Edited my answer – Mila Aug 03 '16 at 14:52

maxandcoffee · Accepted Answer · 2016-08-03T15:19:44.570

I would recommend adding a class with these properties in css:

.myClass{
    letter-spacing: 0px;
    text-transform: lowercase;
    background: #4682B4;
}
.myClass::first-letter{
    text-transform: uppercase;
}

and your script using:

$(el).addClass('myClass');

instead of .css().

            $('li').on('mouseover', function(event){

                var el = $(event.target).parent().children()['1'];
                  $(el).css({
                      "background" : "#483D8B",
                      "letter-spacing" : "2px",
                      "text-transform" : "uppercase"
                          });

            });

            $('li').on('mouseout', function(event){
                var el = $(event.target).parent().children()['1'];
                $(el).addClass('myClass);

Though, it seems like you are using a hover effect, you do the same thing with

el:nth-of-type(2){
    letter-spacing: 0px;
    text-transform: lowercase;
    background: #4682B4;
}
el:nth-of-type(2)::first-letter{
    text-transform: uppercase;
}
el:nth-of-type(2):hover{
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #483D8B;
}

One of CSS properties doesn't work with Jquery : "first-letter"

2 Answers2