связанные с CSS; назначение специального класса li

Question

Нужна помощь в следующей ситуации. Я слайдер, кто настройка, как это (упрощенный):

<div class="slider"> 
    <ul> 
     <li>...</li> 
     <li class="current">...</li> 
     <li class="center active">...</li> 
     <li class="current">...</li> 
     <li>...</li> 
    </ul> 
</div> 


.slider li {opacity: 0.3;} 
.slider li.center.active {opacity: 1;} 
.slider li.current:first-child {opacity: 1;} // this here doesn't work. 

Я не могу использовать .slider li:nth-child(2).current {opacity: 1;} , потому что я с помощью ползунка, так что число, если li тегов отличаются.

Есть ли другой способ, кроме изменения классов li, изменить прозрачность первого класса current.

Answer 1

Вы можете использовать нижеуказанные код:

<div class="slider"> 
    <ul> 
     <li>...</li> 
     <li class="current">...</li> 
     <li class="center active">...</li> 
     <li class="current">...</li> 
     <li>...</li> 
    </ul> 
</div> 
.slider li {opacity: 0.3;} 
.slider li.center.active {opacity: 1;} 
.slider li.current {opacity: 1;} 
.slider li.center.active ~ li.current {opacity: 0.3;} 

Answer 2

https://jsfiddle.net/1jko09xq/1/

i think you need this try this 

Answer 3

В вашей ситуации первый ток <li> фактически является вторым элементом <ul> использования этого CSS

.slider li.current:nth-child(2) {opacity: 1;} 

Смотрите рабочий пример: https://jsfiddle.net/yudi/a3w1bshr/

В CSS нам нужно для подсчета позиции с общими элементами и h а его второй элемент <ul>

Answer 4

Вы можете добавить дополнительный класс в список, который хотите изменить.

HTML:

<div class="slider"> 
     <ul> 
      <li>...</li> 
      <li class="current sliderOpacity">...</li> 
       <li class="center active">...</li> 
       <li class="current">...</li> 
       <li>...</li> 
      </ul> 
     </div> 

CSS:

.sliderOpacity { 
opacity: 1;} 

Answer 5

здесь вы идете сэр

.slider li, 
 
.slider ul > .current ~ .current { opacity: 0.3; } 
 

 
.slider li.center.active, 
 
.slider ul > .current { opacity: 1; }

<div class="slider"> 
 
    <ul> 
 
     <li>...</li> 
 
     <li class="current">...</li> 
 
     <li class="center active">...</li> 
 
     <li class="current">...</li> 
 
     <li>...</li> 
 
    </ul> 
 
</div>