css - CSS3 nth-of-type combined with a class -
i have page wrapper class called .j-l-page-wrapper
. have section wrapper class called .j-v-section-wrapper
. each section wrapper in page wrapper have alternating background colors. have used following css:
div.j-l-page-wrapper div.j-v-section-wrapper:nth-of-type(even) { background-color: @j-var-color-section-wrapper-bg-mod1; } div.j-l-page-wrapper div.j-v-section-wrapper:nth-of-type(odd) { background-color: @j-var-color-section-wrapper-bg-mod2; }
along html
<div class="j-l-page-wrapper"> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> </div>
however, no alternating background coloring applied, leading me think have not applied correct selector.
how say, using css3, apply even
/odd
based background coloration div
of 1 type containing div
of type? put way, if html were:
<div class="j-l-page-wrapper"> <div class="j-v-section-wrapper"></div> <div class="something-else"></div> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <div class="something-else"></div> </div>
... still want 4 div
s of specified type have alternating colors.
to put simply, second markup configuration can't have desired behaviour css.
the div.your_class:nth-of-type()
counts div elements of same level. adding class selecor makes sure style applied elments class keeps counting divs have same level.
workaround :
you can replace tags class .something-else
other tag (for example <span>
element) work desired :nth-of-type()
html :
<div class="j-l-page-wrapper"> <div class="j-v-section-wrapper"></div> <span class="something-else"></span> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <div class="j-v-section-wrapper"></div> <span class="something-else"></span> </div>
Comments
Post a Comment