更改特定元素的CSS内容属性

Question

Given the style :

ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

and the objects :

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-todo">One</li>
    <li class="progtrckr-todo">Two</li>
    <li class="progtrckr-todo">Three</li>
</ol>

How can I change the content property of the second object only , from

content: "\039F"; 

to

content: "\\2716"; ?

I tried :

<li class="progtrckr-todo" style="content: '\2716'">Two</li>

But it doesn't work .

Any idea how to make this work ?

Answer 1

content property is available only on pseudo elements ( :before , :after ). You cannot overwrite it with an inline style since an inline style always applies to the element it's on, and pseudo elements are not part of the markup you can edit.

Use either :nth-of-type or :nth-child pseudo selector:

ol.progtrckr :nth-child(2):before {
    content: "\2716";
}

Answer 2

You can use nth-child to override the properties

ol.progtrckr :nth-child(2):before {
    content: "\2716";
}

Answer 3

Should be something like this:

ol.progtrckr :nth-child(2):before {
 content: "\2716";
}

you can refeer to this if its not exactly what you need

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

The content:'' property is a css property of the pseudo element :before and not the li element.

If you want to change the content programatically, you'd better just add some class to the li element, and override the li.yourClass:before{content:'...'} in your css.

Answer 5

You problem is that in you css styles it works with ":before". So you need to insert content before element. You can use nth-child W3C

Or just add specific class to sec element:

  secelementclass:before {
        content: "\2716";
    }

<ol class="progtrckr" data-progtrckr-steps="5">
<li class="progtrckr-todo">One</li>
<li class="progtrckr-todo secelementclass">Two</li>
<li class="progtrckr-todo">Three</li>