Показать сообщение отдельно
  #1 (permalink)  
Старый 16.08.2016, 13:31
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

помогите пожалуйста сократить css
Был слайдер на 5 картинок. я увеличил его до 10 картинок, но на CSS теперь смотреть не могу. Можно как-то сократить записи вида

/* Show the info box when the user selects the slides */
.slider2 input:nth-of-type(1):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(1) .info, 
.slider2 input:nth-of-type(2):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(2) .info,  
.slider2 input:nth-of-type(3):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(3) .info,
.slider2 input:nth-of-type(4):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(4) .info, 
.slider2 input:nth-of-type(5):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(5) .info,
.slider2 input:nth-of-type(6):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(6) .info, 
.slider2 input:nth-of-type(7):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(7) .info,  
.slider2 input:nth-of-type(8):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(8) .info,
.slider2 input:nth-of-type(9):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(9) .info, 
.slider2 input:nth-of-type(10):checked  ~ .slides2 > .tk-museo-sans span:nth-of-type(10) .info 

{
	bottom: 79px;
}

/* .. and finally, move the slides into the correct position when the user clicks the arrow, so the right
   slide is selected */

.slider2 input:nth-of-type(1):checked ~ .slides2 > div > span { left: 5% }
.slider2 input:nth-of-type(2):checked ~ .slides2 > div > span { left: -5% }
.slider2 input:nth-of-type(3):checked ~ .slides2 > div > span { left: -15% }
.slider2 input:nth-of-type(4):checked  ~ .slides2 > div > span { left: -25% }
.slider2 input:nth-of-type(5):checked ~ .slides2 > div > span { left: -35% }
.slider2 input:nth-of-type(6):checked ~ .slides2 > div > span { left: -45% }
.slider2 input:nth-of-type(7):checked ~ .slides2 > div > span { left: -55% }
.slider2 input:nth-of-type(8):checked ~ .slides2 > div > span { left: -65% }
.slider2 input:nth-of-type(9):checked ~ .slides2 > div > span { left: -75% }
.slider2 input:nth-of-type(10):checked ~ .slides2 > div > span { left: -85% }



Там много подобного, но никак не пойму как такое можно сократить и сделать слайдер на бесконечное количество картинок.
Ответить с цитированием