CODEWITHSUNDEEP
htmlcss
user1477955
user1477955

Reputation: 1670

CSS - odd and even does not work

I want to use the pseudo selectors odd end even. But if sequence of element is divided by another element, e.g. a heading the order of odd and even is broken. How can I continue the initial order?

JS FIDLLE

HTML

<div class="fig">
     <figcaption>t</figcaption>
    <figcaption></figcaption>
  <div>headline</div>
    <figcaption></figcaption>
    <figcaption></figcaption>    
    <figcaption></figcaption>
 </div>

CSS

.fig figcaption:nth-child(even) {
 background:green;
}

.fig figcaption:nth-child(odd) {
  background:blue;
}

Upvotes: 1

Views: 171

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

simply use

figcaption:nth-of-type(odd)
figcaption:nth-of-type(even)

fiddle

https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type

Upvotes: 7

Kawinesh S K
Kawinesh S K

Reputation: 3220

:nth-child (odd) doesn't check no of figcaption and calculate odd and even based on it. It checks based on your Parent element div

nth-child DEMO

:nth-of-type(odd) it check the no of figcaption and calculate odd and even based on them.

nth-of-type DEMO

Upvotes: 1

jacek_podwysocki
jacek_podwysocki

Reputation: 807

Wrapping each figure sets in another div will work as you expect

<div class="fig">
    <div>
        <figcaption>t</figcaption>
        <figcaption></figcaption>
    </div>
    <div>headline</div>  
    <div>
        <figcaption></figcaption>
        <figcaption></figcaption>
        <figcaption></figcaption>
    </div>
</div>

Upvotes: -3

Related Questions