Добавление подкласса CSS к элементу CSS, используемому в JavaScript? - PullRequest
Новая
       4

Добавление подкласса CSS к элементу CSS, используемому в JavaScript?

0 голосов
/ 06 октября 2010

Впервые использую CSS, поэтому мой вопрос может не иметь смысла. Я использую шаблон меню, который использует JavaScript для перемещения элементов CSS вокруг. У меня есть несколько элементов рядом друг с другом, и я хотел чередовать фон, создав подкласс для элемента (например: .cc_item .odd{background:#fff}).

стиль: 

.cc_item{
    text-align: center;
    width: 140px;
    height: 600px;
    float: left;
    border-bottom: 1px solid #000;
    background: #e8c486 url(../images/menuBack.jpg) repeat top left;
    position: relative;
    -moz-box-shadow: 3px -3px 10px #000;
    -webkit-box-shadow: 3px -3px 10px #000;
    box-shadow: 3px -3px 10px #000;
}

HTML: 

<div class="cc_item" style="z-index:6;">
    <img src="images/1.jpg" alt="image" />
    <span class="cc_title">Pizza</span>
    <div class="cc_submenu">
        <ul>
            <li class="cc_content_1">Pizzas</li>
            <li class="cc_content_2">Calzones</li>
        </ul>
    </div>
</div>

Я хочу добавить .odd{ } к cc_item, чтобы в html я мог указать «нечетный» класс cc_item. Я попробовал пару вещей, но не могу заставить его работать.

  1. Я не знаю, как правильно добавить подкласс в элемент CSS. Я сделал это с моей таблицей стилей таблицы, но "." перед cc_item сбивает меня с толку (извините ... действительно новый).
  2. Я не знаю, где указать "class = odd" в html.
  3. Я не знаю, внесу ли я эти изменения, будет затронут JavaScript, который использует cc_item.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 06 октября 2010

Вы можете присвоить элементу несколько классов, например: 

 <div class="cc_item odd" style="z-index:6;">

Просто разделите их пробелами.

Чтобы сослаться на этот код с помощью CSS или jQuery, вы можете объединить классы в одну цепочку и ссылаться на них следующим образом: 

.cc_item.odd { /*styles go here*/ } or $('.cc_item.odd')

Это ударит по обоим классам.И если вы хотите, чтобы это работало в IE6, прочитайте инструкции здесь: http://www.oppenheim.com.au/2009/05/24/multiple-css-classes-a-little-known-ie6-hack/

Кроме того, просто FYI - когда вы используете метод jQuery addClass(), он автоматически добавит пробел между классами для вас,так что все, что вам нужно пройти, это нечетный класс.

0 голосов
/ 06 октября 2010

Я не думаю, что есть такая вещь, как подкласс CSS ... но попробуйте это

Добавьте новый .cc_item_odd{...} ПОСЛЕ вашей существующей закрывающей скобки } (я бы не назвал это .odd потому что это менее наглядно и более подвержено конфликтам, так как нет подклассов)

При изменении набора классов class="cc_item cc_item_odd" Таким образом вы применяете более одного класса.Я не уверен, как ваш JavaScript выполняет поиск, но я думаю, что это не изменится

...