[Помогите] Разный цвет элементам в списке

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем bawan, 5 окт 2013.

  1. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    Вот есть такая конструкция:

    Код:
    <ul class="menu">
       <li class="tab-link">
         <a class="link" href="">
           <i class="icon-leaf">Зеленый</i>   
         </a>
       </li>
       <li class="tab-link">
         <a class="link" href="">
           <i class="icon-leaf">Красный</i>   
         </a>
       </li>
       <li class="tab-link">
         <a class="link" href="">
           <i class="icon-leaf">Желтый</i>   
         </a>
       </li>
       <li class="tab-link">
         <a class="link" href="">
           <i class="icon-leaf">Синий</i>   
         </a>
       </li>
    </ul>
    Как сделать, что-бы каждому элементу <i class="icon-leaf"> можно было произвольно назначить свой цвет?
    Или, может можно как-то назначать ему цвет, в зависимости от его содержания? Синему синий и т.д. - как такое сделать? Уже мозг поломал...
    Через css такое реализуемо? Если что, то jquery подключен.
     
  2. yurets86

    yurets86

    Регистрация:
    13 апр 2013
    Сообщения:
    394
    Симпатии:
    328
    можно сделать так

    <ul class="menu">
    <li class="tab-link" id="green">
    <a class="link" href="">
    <i class="icon-leaf">Зеленый</i>
    </a>
    </li>
    <li class="tab-link">
    <a class="link" href="">
    <i class="icon-leaf">Красный</i>
    </a>
    </li>
    <li class="tab-link">
    <a class="link" href="">
    <i class="icon-leaf">Желтый</i>
    </a>
    </li>
    <li class="tab-link">
    <a class="link" href="">
    <i class="icon-leaf">Синий</i>
    </a>
    </li>
    </ul>


    и css
    Код:
    #green a{
        color:red;
    
    }
     
    Последнее редактирование: 5 окт 2013
  3. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    Не, так не получится, список создается динамически, через foreach (в первом сообщении немного ошибся со структурой - название внутри <a> а не внутри <i>):
    Код:
    <?php foreach ($categories as $category) { ?>
       <li class="tab-link">
         <a href="" class="link">
           <i class="<?php echo $this->config->get('kb_icon_category'); ?>"></i>
           <?php echo $category['name']; ?> // здесь название цвета будет
         </a>
    
    php надо было учить мне...
     
  4. yurets86

    yurets86

    Регистрация:
    13 апр 2013
    Сообщения:
    394
    Симпатии:
    328
    a - это ссылка ,i - это название, срабатывает принцип наследования, если а - родитель зеленый, то и наследник тоже зеленый.
    так что все получится
     
  5. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    Ну вобщем решил.
    Добавил в <i class="<?php echo $this->config->get('kb_icon_category'); ?>" id="leaf-<?php echo $category['category_id']; ?>"></i>
    и получил айдишники вида id="leaf-82" и т.п.

    И походу тему надо было создавать в разделе Opencart...