Ändern Hintergrundfarbe mit n-ten Kind-Selektor

Question

Ich versuchte mit n-Kind-Selektor, aber es hat nicht funktioniert. vielleicht die Art, wie ich falsch oder etwas

<ul> 
<li class="media list-news"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-10"> 
      <div> 
       <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a> 
       <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a> 
      </div> 
      <div> 
       <div class="description-news"> value.description 
        <span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-md-2 child-selector"> 
      <div class="link-source btn-xs btn-source" href="javascript:void(0);"> 
       <i class="fa fa-globe"></i> value.portalName 
      </div> 
     </div> 
    </div> 
</li> 

Beispiel: https://jsfiddle.net/03koh1w4/

Answer 1

Sie müssen ein paar Änderungen (HTML und CSS)

HTML machen -> dont schließen Ihre Bestellliste für alle Artikel

CSS -> Geben Sie Ihre (ungerade und gerade) auf Ihrer Liste und dann auf Ihre Klasse

CSS

.link-source { 
    display:inline; 
    color:#fff; 
} 

li:nth-child(odd) .link-source { 
    background: green; 
} 

li:nth-child(even) .link-source { 
    background: red; 
} 

HTML

<ul> 
    <li class="media list-news"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-10"> 
     <div> 
      <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a> 
      <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a> 
     </div> 
     <div> 
      <div class="description-news"> value.description 
      <span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-4 col-md-2 child-selector"> 
     <div class="link-source btn-xs btn-source" href="javascript:void(0);"> 
      <i class="fa fa-globe"></i> value.portalName 
     </div> 
     </div> 
    </div> 
    </li> 

    <li class="media list-news"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-10"> 
     <div> 
      <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a> 
      <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a> 
     </div> 
     <div> 
      <div class="description-news"> value.description 
      <span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-4 col-md-2 child-selector"> 
     <div class="link-source btn-xs btn-source" href="javascript:void(0);"> 
      <i class="fa fa-globe"></i> value.portalName 
     </div> 
     </div> 
    </div> 
    </li> 
    <li class="media list-news"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-10"> 
     <div> 
      <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a> 
      <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a> 
     </div> 
     <div> 
      <div class="description-news"> value.description 
      <span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-4 col-md-2 child-selector"> 
     <div class="link-source btn-xs btn-source" href="javascript:void(0);"> 
      <i class="fa fa-globe"></i> value.portalName 
     </div> 
     </div> 
    </div> 
    </li> 

    <li class="media list-news"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-10"> 
     <div> 
      <a href="#view/detail-berita.html?id= value.id " class="btn_username_find username_find news-title"> value.title </a> 
      <a href="#view/detail-berita.html" class="btn_username_find venueId hide"> value.id </a> 
     </div> 
     <div> 
      <div class="description-news"> value.description 
      <span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span> 
      </div> 
     </div> 
     </div> 
     <div class="col-sm-4 col-md-2 child-selector"> 
     <div class="link-source btn-xs btn-source" href="javascript:void(0);"> 
      <i class="fa fa-globe"></i> value.portalName 
     </div> 
     </div> 
    </div> 
    </li> 
</ul> 

DEMO HERE