Fixing my CSS: How to get the lists and titles to work?

Question

I'm having problems with 2 things I can't seem to find a solution for on a new design I'm currently working on.

1) the nth-of-type is not working to alternate the background of the titles, it suppouse to be green/blue alternating like in the CSS in my fiddle but I can't seem to get the syntax right as it's nested and can't seem to figure this out.

2) I want to style the numbers of my ol list, this is a wordpress site using repeater field so the numbers need to keep the count and not restart that's why the ol is outside the <div class="fact-blocks timeline"> can't seem to figure this out as well...

Any help will be much appreciated, thanks in advance!

the code in fiddle: http://jsfiddle.net/2unvxqh3/

my html:

<!-- Start Facts Block Area -->
<div class="facts"><ol class="circles-list">
                <div class="fact-blocks timeline">
            <h2 class="step-title">Cows</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="cows is good">
                                        <li>this is number 1</li>
                                        <li>this is number 2</li>
                                        <li>this is number 3</li>
                            </div>
                <div class="fact-blocks timeline">
            <h2 class="step-title">tomatoes</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="tomatoes alt tag">
                                        <li>mispar 1</li>
                                        <li>number 2</li>
                                        <li>magniv 3</li>
                            </div>
                <div class="fact-blocks timeline">
            <h2 class="step-title">Envelope</h2>
                <img class="factimg" src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" alt="envelope">
                                        <li>intersting fact about envelope</li>
                                        <li>intersting fact about envelopedfdfdfdf</li>
                                        <li>fdf df dintersting fact about envelope</li>
                            </div>
        </ol></div> <!-- End Facts Block Area -->

my css:

.fact-blocks {font-size:14px;background: #d8e5f6 none repeat scroll 0 0;border-top:1px solid #b8d0ee}

.timeline::before {
    background: #cecece none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    left: 19px;
    position: absolute;
    top: 0;
    width: 12px;
}

.timeline {
    padding: 44px 0 56px 60px;
    position: relative;
}

.step-title:before {
    background: #cecece none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 28px;
    left: -57px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width: 28px;
}

.facts h2 {
    background-color: #72c630;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}

.facts h2:nth-of-type(odd) {
    background-color: #245697;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 45px 9px;
    padding: 11px 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 0;
}

.facts h2:after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #72c630;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 0;
}

.facts h2:nth-of-type(odd):after {
    border-bottom: 8px solid transparent;
    border-right: 11px solid #245697;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: -7px 0 0 -10px;
    position: absolute;
    top: 50%;
    width: 0;
}

.fact-blocks:nth-of-type(odd) {background-color:#eff9e8;border-top:1px solid #d0eeb8;}

.factimg {width:300px;height:300px;}
.fact-blocks img {width:300px;border-radius:50%;overflow:hidden;border:7px #cecece solid;box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6);}

ol.circles-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter;
}
ol.circles-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.circles-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;

    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

ok, is there a possible way to start counting again in another list form where i left off in a list before that ? — Roy Savion, Sep 21 '15 at 18:35

Hieu Le · Accepted Answer · 2015-09-21T19:06:58.140

0

See it working here: http://jsfiddle.net/ecur0zmf/3/

You need to base the step-title (h2) styles off the nth style of .fact-blocks

    .fact-blocks:nth-of-type(odd) h2 {
        background-color: #245697;
        border-radius: 2px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.5;
        margin: 0 0 45px 9px;
        padding: 11px 24px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        word-spacing: 0;
    }

    .fact-blocks:nth-of-type(odd) h2:after {
        border-bottom: 8px solid transparent;
        border-right: 11px solid #245697;
        border-top: 8px solid transparent;
        content: "";
        height: 0;
        left: 0;
        margin: -7px 0 0 -10px;
        position: absolute;
        top: 50%;
        width: 0;
    }

To get the order list to work, just surround your li with a ol tag

    <ol>
       <li>mispar 1</li>
       <li>number 2</li>
       <li>magniv 3</li>
    </ol>

To get your number to continue to do this:

.facts {counter-reset: li-counter;}

See: http://jsfiddle.net/ecur0zmf/6/

edited Sep 21 '15 at 19:06

answered Sep 21 '15 at 18:15

Hieu Le

738
4
8

thanks. it works for the titles background but why it's not working for the tip on the left?, i added a comment where i mean in the fiddle, in this line: .fact-blocks h2:nth-of-type(odd):after – Roy Savion Sep 21 '15 at 18:33
Here you go I fixed it: http://jsfiddle.net/ecur0zmf/3/. Not sure if someone messed it up – Hieu Le Sep 21 '15 at 18:37
Sorry @user3477285, I didn't save it correctly. please go to the link that has /3 – Hieu Le Sep 21 '15 at 18:39
thanks! now i just need to get the ordered list working, i fixed the invalid markup issue but i can't get the counter to work and keep the count, its starting from 1 all the time, any ideas? see here: http://jsfiddle.net/ecur0zmf/5/ – Roy Savion Sep 21 '15 at 18:54
Please see http://jsfiddle.net/ecur0zmf/6/ for the numbering to work @user3477285 – Hieu Le Sep 21 '15 at 19:07
thank you so much for your help!!! I not only got the solution but also read and understand the problem and how to handle it in the future, thanks a lot! – Roy Savion Sep 21 '15 at 19:16

score 0 · Answer 2 · edited May 23 '17 at 12:29

Part One - zebra stripping

Given the markup you've provided you need to move the nth-type-of selector up to the .fact-blocks DIVs. Your current selector is going to reach down inside of .fact-blocks and attempt alternating styles from there.

.fact-blocks h2 {
    /* your odd styles */
}
.fact-blocks:nth-of-type(2n) h2 {
    /* your even styles */
}

Part Two - ol ordering

You can give your ordered lists a start attribute that will tell them where to start numbering from. See this SO post which addresses start value for ordered lists.

The only permitted child elements of an <ol> or <ul> is an <li>. What you have provided is invalid.

<ol start="3">
    <li></li>
    <li></li>
</ol>
<ol start="3">
    <li></li>
    <li></li>
</ol>

thanks the titles are done, any ideas on fixing the ol counting? start isn't going to work as i need something dynamic, look here: http://jsfiddle.net/ecur0zmf/5/ — Roy Savion, Sep 21 '15 at 19:01

Fixing my CSS: How to get the lists and titles to work?

2 Answers2