CSS стиль неупорядоченного списка, содержащего 5 ul с одинаковыми именами классов, применять разные стили для каждого

Question

<li class="submenu"><a href="#">mysite</a>
<ul class="level2">(apply different style to this one)
<li><a href="#">toys</a></li>
<li><a href="#">cars</a></li>
<li><a href="#">trucks</a></li>
<li><a href="#">wagons</a></li>
</ul>
</li>

<li class="submenu"><a href="#">cooks</a>
<ul class="level2">
<li><a href="#">toys3a</a></li>
<li><a href="#">cars4b</a></li>
<li><a href="#">trucks34d</a></li>
<li><a href="#">wagonsse</a></li>
</ul>
</li>

<li class="submenu"><a href="#">campers</a>
<ul class="level2">(apply different style to this one)
<li><a href="#">toyssx</a></li>
<li><a href="#">cars12e</a></li>
<li><a href="#">trucks234s</a></li>
<li><a href="#">wagonssxzq</a></li>
</ul>
</li>

Приведенный выше неупорядоченный список генерируется генератором категорий (скрипт php) и приводит к появлению выпадающего меню, имена классов не могут быть изменены, и я хотел бы применять различные стили к ul, используя css, в настоящее время мой стиль применяется ко всем. Есть ли способ сделать это?

Answer 1

Вы должны использовать :nth-child.Например, чтобы применить CSS к третьему .level2:

.submenu:nth-child(3) .level2 {
    color: red
}

:nth-child работает в IE9 + и во всех современных браузерах.Если вам это нужно для работы, например, в более старых версиях IE, вам придется использовать JavaScript / jQuery и / или selectivizr .

Answer 2

Я понимаю, что ваша проблема в том, как выбирать элементы в вашей таблице стилей CSS без изменения имен классов.Вы можете сделать это, используя несколько имен классов или идентификаторы.

Несколько имен классов поддерживаются практически всеми браузерами;даже IE6, хотя с некоторыми оговорками (http://www.quirksmode.org/css/contents.html).

Пример:

...
<ul class="level2 custom-style-1">(apply different style to this one)
    <li><a href="#">toys</a></li>
    <li><a href="#">cars</a></li>
    <li><a href="#">trucks</a></li>
    <li><a href="#">wagons</a></li>
</ul>

<li class="submenu"><a href="#">cooks</a>
<ul class="level2 custom-style-2">
...

Или вы можете просто использовать идентификаторы

...
<ul id="custom-style-1" class="level2">(apply different style to this one)
    <li><a href="#">toys</a></li>
    <li><a href="#">cars</a></li>
    <li><a href="#">trucks</a></li>
    <li><a href="#">wagons</a></li>
</ul>

<li class="submenu"><a href="#">cooks</a>
<ul id="custom-style-2" class="level2">
...