Форумы портала PHP.SU » » Вопросы новичков » CSS на ночь глядя

Страниц (1): [1]
 

1. Dee - 07 Июля, 2018 - 03:16:32 - перейти к сообщению
Привет, подскажите селектор, который бы выбрал каждый
четвертый элемент после блока .block , количество спан может быть любым
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="block">Заголовок</div>
  3. <span class="info">Инфо</span>
  4. <span class="info">Инфо</span>
  5. <span class="info">Инфо</span>
  6. <span class="info">Инфо!!!!!!!!!!!!</span>
  7. <span class="info">Инфо</span>
  8. <span class="info">Инфо</span>
  9.  
  10.  
  11. <div class="block">Заголовок</div>
  12. <span class="info">Инфо</span>
  13. <span class="info">Инфо</span>
  14. <span class="info">Инфо</span>
  15. <span class="info">Инфо!!!!!!!!!!!!</span>
  16. <span class="info">Инфо</span>
  17.  
  18. <div class="block">Заголовок</div>
  19. <span class="info">Инфо</span>
  20. <span class="info">Инфо</span>
  21.  
  22. <div class="block">Заголовок</div>
  23. <span class="info">Инфо</span>
  24. <span class="info">Инфо</span>
  25. <span class="info">Инфо</span>
  26. <span class="info">Инфо!!!!!!!!!!!!</span>
  27. <span class="info">Инфо</span>
  28. <span class="info">Инфо</span>
  29. <span class="info">Инфо</span>
  30. <span class="info">Инфо!!!!!!!!!!!!</span>
  31. <span class="info">Инфо</span>
  32. <span class="info">Инфо</span>
  33. <span class="info">Инфо</span>
  34. <span class="info">Инфо!!!!!!!!!!!!</span>
  35. <span class="info">Инфо</span>
2. Vladimir Kheifets - 07 Июля, 2018 - 08:12:51 - перейти к сообщению
Dee пишет:
Привет, подскажите селектор, который бы выбрал каждый
четвертый элемент после блока .block , количество спан может быть любым
Спойлер (Отобразить)

Доброе утро!
Можно определить как смежный селектор:
div[class=block]+span+span+span+span{color:#ff0000 !important}
Если свойства, которые Вы хотите отределить в смежном селекторе определены в классе "info", то нужно добавлять !important

Удачи!
Спойлер (Отобразить)
3. Dee - 07 Июля, 2018 - 19:46:21 - перейти к сообщению
Ваша схема не работает )
Это будет выглядеть так на фото,
т е блоки выделены не все.
4. Vladimir Kheifets - 08 Июля, 2018 - 12:59:25 - перейти к сообщению
Dee пишет:
Ваша схема не работает )
Это будет выглядеть так на фото,
т е блоки выделены не все.

Добрый день!
Схема работает, так как Вы хотели, "четвертый элемент после блока .block "
т.е. после <div class="block"> четвертый <span>
Чтобы это работало нужно повторять <div class="block"> перед "любым количеством <span>".
Если же по какой-то причине Вы хотите определить свойства селектора, без повторения <div class="block">, то будет работать так:
CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. div[class=block]+span+span+span+span{color:#ff0000 !important}
  3. div[class=block]+span+span+span+span+span+span+span+span{color:#ff0000 !important}
  4. div[class=block]+span+span+span+span+span+span+span+span+span+span+span+span{color:#ff0000 !important}
  5. </style>

Но думаю, что это грамоздко и проще определить отдельный класс, например, info2
и в тэгах писать:
CODE (html):
скопировать код в буфер обмена
  1. <style>.info2{color:#ff0000 !important}</style>
  2. <span class="info info2">Инфо!!!!!!!!!!!!</span>

 

Powered by ExBB FM 1.0 RC1