Css3 nth-child selector не действуют, как ожидалось

Question

Я подхожу к вам, ребята, потому что я понял, что вместо того, чтобы использовать javascript для выбора каждого 2 элемента, вы можете использовать селектор css3 nth-child ...

Я попытался использовать его, но он не работал так, как я ожидал ... И для меня нет никакого смысла, что он не работает ...

Вот что я получаю, когда я использую nth-child (нечетные):

Первый элемент работает хорошо ... маржа работает. Но вместо третьего элемента, имеющего запас, это четвертый один, что есть ... И я не понимаю, почему это происходит ...

Некоторый код:

<section id="portfolio"> 
    <ul> 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/547404026266152.jpg);"> 
      <div id="portfolio-details"><img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/04/logo-v2-slogan.png"></div> 
     </li> 

     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/a_Hamburger-Bun-with-HamburgerS_3.jpg);"> 
      <div id="portfolio-details"><img id="portfolio-logo" src=""></div> 
     </li> 

     <li style="list-style: none; display: inline"> 
      <div id="portfolio-selected"></div> 
     </li> 

     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/24346_l.jpg);"> 
      <div id="portfolio-details"><img id="portfolio-logo" src=""></div> 
     </li> 

     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/unnamed-1.jpg);"> 
      <div id="portfolio-details"><img id="portfolio-logo" src=""></div> 
     </li> 

     <li style="list-style: none; display: inline"> 
      <div id="portfolio-selected"></div> 
     </li> 

     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/maximoto.png);"> 
      <div id="portfolio-details"><img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/03/maxi1.png"></div> 
     </li> 

     <li style="list-style: none; display: inline"> 
      <div id="portfolio-selected"></div> 
     </li> 
    </ul> 
</section> 

и CSS:

#portfolio { 
    width:100%; 
    margin:40px 0 0 
} 

#portfolio ul { 
    list-style:none 
} 

#portfolio ul li { 
    display:inline-block; 
    height:300px; 
    width:470px; 
    background-size:100% 100%; 
    -webkit-filter:grayscale(100%); 
    filter:grayscale(100%); 
    transition:all .2s linear 
} 

.single-portfolio:nth-child(odd) { 
    margin-right:26px 
} 

#portfolio ul li:hover { 
    cursor:pointer; 
    -webkit-filter:grayscale(0%); 
    filter:grayscale(0%) 
} 

#portfolio-details { 
    background:rgba(150,150,150,0.7); 
    width:100%; 
    height:100%; 
    transition:all .2s linear; 
    vertical-align:middle; 
    text-align:center; 
    position:relative 
} 

#portfolio-details img { 
    transition:all .2s linear; 
    margin:0 auto; 
    display:inline-block; 
    text-align:center; 
    vertical-align:middle; 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform:translate(-50%,-50%); 
    transform:translate(-50%,-50%); 
    max-width:300px 
} 

#portfolio-details:hover { 
    background:rgba(26,188,156,0); 
    width:100%; 
    height:100% 
} 

#portfolio-details:hover img { 
    opacity:0 
} 

Если вы, ребята, можете мне помочь и объяснить мне, что случилось ... Было бы замечательно!

Заранее спасибо

Answer 1

С <div id="portfolio-selected"></div> идет между списками, поэтому nth-child() не будет работать. Используйте nth-of-type() вместо:

.single-portfolio:nth-of-type(odd) {...} 

Демо:

$(".single-portfolio").eq(0).addClass('green')

.single-portfolio:nth-of-type(odd) {color:red} 
 

 
.green{color:green;}

<section id="portfolio"> 
 
    <ul> 
 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/547404026266152.jpg);"> 
 
      <div id="portfolio-details"> 
 
       <img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/04/logo-v2-slogan.png"> 
 
      </div> 
 
     </li> 
 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/a_Hamburger-Bun-with-HamburgerS_3.jpg);"> 
 
      <div id="portfolio-details"> 
 
       <img id="portfolio-logo" src=""/> 
 
      </div> 
 
     </li> 
 
     <div id="portfolio-selected"></div> 
 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/04/24346_l.jpg);"> 
 
      <div id="portfolio-details"> 
 
       <img id="portfolio-logo" src=""/> 
 
      </div> 
 
     </li> 
 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/unnamed-1.jpg);"> 
 
      <div id="portfolio-details"> 
 
       <img id="portfolio-logo" src=""> 
 
      </div> 
 
     </li> 
 
     <div id="portfolio-selected"></div> 
 
     <li class="single-portfolio" style="background-image: url(http://localhost/robeenNew/wp-content/uploads/2015/03/maximoto.png);"> 
 
      <div id="portfolio-details"> 
 
       <img id="portfolio-logo" src="http://localhost/robeenNew/wp-content/uploads/2015/03/maxi1.png"> 
 
      </div> 
 
     </li> 
 
     <div id="portfolio-selected"></div> 
 
    </ul> 
 
</section>

Answer 2

Похоже, что он работает правильно.

Ваш PHP рендерит пустые элементы. Это вас путает.

Если пустые элементы желательны, возможно, вы должны дать им другой класс. Или используйте второй класс для непустых элементов только для этой обработки CSS.

EDIT:

Мое предложение выше, не будет работать. Read this. nth-child заботится только о том, сколько братьев и сестер имеет соответствующий элемент. Он не фильтрует их.

Вам нужно будет использовать свой PHP для добавления классов .odd в элементы, которые вы хотите стилизовать, или изменить свою разметку каким-то радикальным способом, чтобы дать CSS-дескриптор нечетным элементам.