Как сделать раскраску строк характеристик.

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем UserWii, 2 окт 2015.

  1. UserWii

    UserWii Пользователь

    Сообщения:
    111
    Симпатии:
    2
    Как сделать автоматическую раскраску фона строк характеристик через одну.

    - черный
    - белый
    - черный
    - белый
     
  2. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    Эм.. Приложите пожалуйста скрин что именно вы хотите менять и где.
    Автоматическое??? o_O
    Может быть вам нужен CSS и псевдокласс :nth-child
     
  3. UserWii

    UserWii Пользователь

    Сообщения:
    111
    Симпатии:
    2
    Именно это я и имел в виду. Как это сделать?
     
  4. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    HTML:
    :nth-child(2n) - все четные элементы будут белыми
    :nth-child(2n+1) - все нечетные будут черными
    Найти нужные вам блок и прописать для него стиль.
    Пример:
    Код:
    .block:nth-child(2n) {
    background-color: #fff;
    }
    .block:nth-child(2n+1) {
    background-color: #000;
    }
    Ну или просто сделать все блоки черными, а потом :nth-child(2n) указать белый фон, вариантов много

    P.S этому в школе еще учат))) любой школьник справится)
     
    Последнее редактирование: 2 окт 2015
  5. my2you

    my2you Продвинутый пользователь

    Сообщения:
    278
    Симпатии:
    121
    Учат в школе, учат в школе, учат в школеее....
    Документацию читать и примерчики искать.
    Учат в школе, учат в школе, учат в школеее....

    а можно посмотреть http://getbootstrap.com/css/#tables
    и просто добавить класс table-striped к таблице
     
    solunski.d нравится это.
  6. UserWii

    UserWii Пользователь

    Сообщения:
    111
    Симпатии:
    2
    Пробовал с помощью nth-child, все строки красятся в один цвет.
     
  7. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    Я вам дал ссылку на описание псевдокласса, там же есть и пример, посмотрите пример как реализовано.
     
  8. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    813
    Симпатии:
    216
    У него ошибка с восприятием древа элементов. Вот и не получается у него. Решу проблему за соточку)))
     
  9. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    :D:D:D
    Неплохой заработок)))
     
  10. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    my2you вам подсказал, если плохо понимаете, вам достаточно добавить для <table> класс "table-striped". Они станут серыми, чтобы это исправить. припишете еще один класс "table_color-black"
    в css
    Код:
    .table-striped.table_color-black>tbody>tr:nth-of-type(odd) {
    background-color: #000;
    }
    PS. .table_color-black - это модификатор, его можно использовать множество раз
     
  11. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    813
    Симпатии:
    216
    А можно не тратить время на изучение и потратить всего соточку, и проблемма решена! ;)
     
  12. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    428
    Да я уже знаю на что ты потратишь соточку :D
    Бухать не по мужски!