CSS列表样式类型使用属性值

Question

I'm having some html elements like this

<div class="col-md-3">
    <div class="olListPallette" data-numberStyle="counter(count, lower-alpha) '. '">type1</div>
</div>
<div class="col-md-3">
    <div class="olListPallette" data-numberStyle='counter(count, upper-alpha) ". "'>type2</div>
</div>
<div class="col-md-3">
    <div class="olListPallette" data-numberStyle='counter(count, lower-alpha) ") "'>type3</div>
</div>

What I'm trying to do is when a click a div, the attribute should be set to the <ol> . It has a counter in css and the new list style should be applied to the list items. Here is my list

<ol>
    <li>first</li>
    <li>second</li>
    <li>thirs</li>
</ol>

and my js is

$('.olListPallette').click(function(){
    $('ol').attr('data-numberStyle',$(this).attr('data-numberStyle'));
});

my css:

ol {
list-style: none !important;
counter-reset: count;
}
ol li:before {
content: attr(data-numberStyle);
counter-increment: count;
}

The problem is the attribute data-numberStyle doesn't get the counter value. If I give the value directly like content: counter(count, lower-alpha) ") " then it will work. But I need to use the attribute value in css.

Also, In other cases I need to use only separator. So, If I use the counter in css, I need to pass the separator.

Example:

content: counter(count) + attr(data-numberStyle); // this is not working
// Something like this counter(count) + ", ".
// <div data-numberStyle = ", ">

Here is my Fiddle . If my question is unclear, feel free to ask. I hope you understand. How to use this attribute value in CSS?

Answer 1

Given that data attribute should be a style, An idea comes to mind, it is to modify a 'style' tag directly in the header to apply :before css, please check the updated Fiddle sample:

http://jsfiddle.net/cHhJ5/3/

Javascript:

var $style;
$(document).ready(function(){
    $('.olListPallette').click(function(){
        if(!$style){
             $style = $('<style id="listStyle">ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
             $("head").append($style);
        }else{
             $style.html('ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
        }
    });
});

Hope it helps

Edit (Explanation):

:before (and others pseudo-selectors like :after) can't be modified directly with jQuery because there aren't part of the DOM.

So, a possible workaround may be to modify directly a style tag in header to accomplish the purpose of modify the list style.

However, I feel that it's a bit hackish to add a style tag in header and put styles directly in data attribute, I'd rather prefer to use predefinied css classes and assing them through javascript:

http://jsfiddle.net/cHhJ5/4/

Html, use a class name as a data attr. value:

<div class="olListPallette" data-numberStyle="low">type1</div>

Css, define classes with desired styles:

ol.low li:before {
    content: counter(count, lower-alpha) ") ";
    counter-increment: count;
}

ol.upp li:before {
    content: counter(count, upper-alpha) ") ";
    counter-increment: count;
}

Javascript, just set related class on click:

$(document).ready(function(){
    $('.olListPallette').click(function(){
        $("ol").removeClass();
        $("ol").addClass($(this).attr("data-numberStyle"));
    });
});