CODEWITHSUNDEEP
css
Jen
Jen

Reputation: 1733

CSS counter-reset and increment

I would like to fix my CSS counter so it resets on each occurrence of OL or UL top level parent. Nested OLs should not reset the counter, but it should reset only for each instance of top level OL or UL.

The css that is likely the problem:

section.post-content ol {
    counter-reset: item;
}

Upvotes: 0

Views: 2871

Answers (2)

Jen
Jen

Reputation: 1733

EDIT for solution: http://jsfiddle.net/rjqgz/2/

Here is the CSS for styled numbers and colored bullets in lists (etc). I included the html sections because this will work in Wordpress for creating outline numbering, and because it's easier to just style the content lists and unstyle all the rest of them.

section.post-content ol, section.post-content ul {
    counter-reset: item;
}
section.post-content ul ol {counter-reset: none}
section.post-content ol ul {counter-reset: none}

section.post-content li {
    display: block;
}
section.post-content ol > li {
position:relative;
list-style:none; }

section.post-content ol li:before {
    counter-increment: item;
    content: counters(item, ".") " ";

    position:absolute;
    top:-.05em;
    left:-3.7em;

    width:3em;
    height:.9em; line-height:1em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;

    font-style:italic; font-size:1.02em;  font-weight:bold;
    font-family: Cambria, Cochin, serif;
    opacity:.5;
    text-align:right;
}
section.post-content ul > li {
    position:relative;
    list-style:none;
}
section.post-content ul > li:before { /* Position and style the bullet */
    content:'\00B0'; /* CSS Special Character Converter: http://www.evotech.net/articles/testjsentities.html */

    position:absolute;
    top:-.1em;
    left:-.75em;
    width:.6em; height:1em; line-height:1em;

    margin-right:8px;
    padding:4px;

    font-size:2.08em;
    font-family: Cambria, Cochin, serif;
    opacity:.4;  /* If you want to change color instead, place in header.php */
    text-align:center;
}


/* MARGINS */

/*mobile*/
section.post-content ol, section.post-content ul, section.post-content li { /*children indent*/
    margin:0; padding:0; }
section.post-content ol > li, section.post-content ul > li {
    margin:0 0em .3em 1em; }


@media only screen
    and (min-width : 700px) {
        section.post-content ol, section.post-content ul { /*children indent*/
        margin:0; padding:0;
        margin-left:2em;
        }
        section.post-content > ol, section.post-content > ul { /*parent*/
        margin-left:0; padding-left:0; }

        section.post-content ol > li, section.post-content ul > li {
        margin:0 0em .3em 2em;
        }
    }

Upvotes: 1

vals
vals

Reputation: 64254

You cann't target specifically top level elements (I think).

Instead, target all ol (as you have already), and to avoid reseting counter on non top level ol , create another rule:

ul ul {counter-reset: none}
ol ul {counter-reset: none}

see the result:

http://jsfiddle.net/rjqgz/

Upvotes: 2

Related Questions