I need to alternate the background color of the class jl-member-info
but this doesn't work. I have this code:
.uk-grid .jl-member-item .jl-member-info:nth-child(odd) { position: relative; padding: 0 0.9rem; background-color: rgba(0, 198, 197, 0.89); width: 100%; margin-top: -95px; } .uk-grid .jl-member-item .jl-member-info:nth-child(even) { position: relative; padding: 0 0.9rem; background-color: #090963; width: 100%; margin-top: -95px; }
<div class="jl-member "> <div class=" uk-grid-large uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin=""> <div class="jl-member-item default uk-row-first"> <div class="jl-member-item-img"> <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> </div> <div class="jl-member-info"> <div class="jl-member-name">Alain</div> <div class="jl-member-role">Maire</div> <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> </div> </div> </div> <div class="jl-member-item default"> <div class="jl-member-item-img"> <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> </div> <div class="jl-member-info"> <div class="jl-member-name">Alain</div> <div class="jl-member-role">Maire</div> <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> </div> </div> </div> <div class="jl-member-item default"> <div class="jl-member-item-img"> <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> </div> <div class="jl-member-info"> <div class="jl-member-name">Alain</div> <div class="jl-member-role">Maire</div> <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> </div> </div> </div> </div> </div>
You need to recode like this, because you have only one .jl-member-info
in .jl-member-item
it will always be odd!
.uk-grid .jl-member-item .jl-member-info {
position: relative;
padding: 0 0.9rem;
width: 100%;
margin-top: -95px;
background-color: #090963;
}
.uk-grid .jl-member-item:nth-child(odd) .jl-member-info {
background-color: rgba(0, 198, 197, 0.89);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.