apply different style to odd divs - html

Question

I'm working with owl-caroussel plugin, and I need to apply a border-right style to odd divs, when I apply this selector it just adds the border to all divs of class "info", it doesn't matter if it's even or odd:
section#presentation section#last div.info:nth-of-type(odd){
border-right: 1px solid #ede1d9;
}
I must be doing something wrong, this is the code in the razor view:
<section id="last">
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 newswidth">
<div id="news-wrap">
<div id="owl-example" class="owl-carousel owl-theme">
<!--item-->
#{ var counter = 0;}
#foreach (var itemBlogList in Model.BlogList)
{
if (counter == 4)
{
break;
}
<div class="info">
#itemBlogList.Title
<div class="credentials">
<div class="author">PETER SCHULTZ</div>
<div class="date">#itemBlogList.PublishDate</div>
</div>
<div class="cut">
#Html.Raw(#itemBlogList.Text)
</div>
</div>
counter++;
}
</div>
</div>
</div>
</div>
</section>
How can I add that border to only odd divs of class "info"?

Answer 1

Take a look at this: https://www.w3.org/Style/Examples/007/evenodd.en.html
.test:nth-child(odd) {
background: #ddd;
}
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>

Answer 2

Try to use this selector instead:
section#presentation section#last .owl-carousel > div:nth-child(odd){
border-right: 1px solid #ede1d9;
}
Yours will count all DIVs, (nth-of-type, i.e. DIV), not just the ones with class .info

Answer 3

To get the odd ones use this pseudo class
.info:nth-child(2n-1) {
your styles
}