toggle first-letter CSS property to disable and reappear when clicked again

Question

I have a list where the first-letter of the list is a different color. Currently when jQuery is activated the color changes for each list bullet selected, except for the first letter. Anyone know about the first-letter attribute in CSS and how it can be disabled through a toggle?

IN CSS:

li:first-letter  {
                   color:blue;
                  }

JQUERY:

$(document).ready(function(){
    $('li').click(function(){;
        $(this).toggleClass('selected');
        $('li:first-letter').css('color',''); //////????
    });
});

Does not work; the first-letter CSS rule acts as if it never gets touched through the jQuery. Anyone know? thanks!

`:first-letter` is a pseudo-element and as such jQuery cannot modify its style properties like that. Toggle a class instead and apply styles to that class. — BoltClock, Apr 27 '13 at 08:30
See http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after — BoltClock, Apr 27 '13 at 08:40

score 1 · Accepted Answer · answered Apr 27 '13 at 08:56

1

You can do this:

$('li').click(function () {
    $('li.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

FIDDLE

answered Apr 27 '13 at 08:56

palaѕн

72,112
17
116
136

I want to thank you Mr. Mondal. You are a smart man!!! I troubleshooted this for a few hours and got nowhere. The Fiddle helped, again thanks! – Tryah85 Apr 28 '13 at 03:41

radu florescu · Answer 2 · 2013-04-27T08:58:43.390

0

http://www.w3.org/wiki/CSS3/Selectors/pseudo-elements/:first-letter check this examples.

Also you should use a p or a span or div for your text.

IN CSS:

li p:first-letter {
    color: blue;
}

li p.selected:first-letter {
    color: red;
}

JQUERY:

$(document).ready(function () {
    $('li p').click(function () {
        $(this).toggleClass('selected');
    });
});

HTML:

<ul>
    <li>
        <p>Some text</p>
    </li>
</ul>

Check this jsfiddle which works: http://jsfiddle.net/n9f94/13/

edited Apr 27 '13 at 08:58

answered Apr 27 '13 at 08:21

radu florescu

4,315
10
60
92

2

`:first-letter` is supported by every single CSS browser, ever. It's not like it's something very new. – BoltClock Apr 27 '13 at 08:27
Yeah, i checked this and removed that line. – radu florescu Apr 27 '13 at 08:29
Why is your `p: first - letter` all spaced out unlike your fiddle? That's not proper syntax. – BoltClock Apr 27 '13 at 08:57
yeah, used a plugin from chrome to do that and it looks like it didn't work – radu florescu Apr 27 '13 at 08:59

toggle first-letter CSS property to disable and reappear when clicked again

2 Answers2