Question

В категориях имеется много разных секций (Пульты, Кронштейны и т.д)

Надо чтобы последняя секция (World of Tanks) была другого цвета.

Пытаюсь сделать так:

 

Код

.cat-blocks {font-size:12px; line-height:30px;width:233px;display:table;}
.cat-blocks div { cursor:pointer; overflow:hidden; height:36px; line-height:36px; width:213px; padding-left:20px;background:url(/images/catssimple.png) no-repeat;text-decoration:none; color:#fff;}
.cat-blocks div:last-child { cursor:pointer; overflow:hidden; height:36px; line-height:36px; width:213px; padding-left:20px;background:url(/images/world_of_tanks.png) no-repeat;text-decoration:none; color:#fff;}
.cat-blocks div:hover { cursor:pointer; overflow:hidden; height:36px; line-height:36px; width:213px; padding-left:20px;background:url(/images/catshover.png) no-repeat;text-decoration:none; color:#2c2f3d;}

Вроде все правильно, но не хочет работать

Answer 1

Если вам просто нужно выделить только эту категорию, в стили добавьте:

#blocks-rt-46 { cursor:pointer; overflow:hidden; height:36px; line-height:36px; width:213px; padding-left:20px;background:url(/images/world_of_tanks.png) no-repeat;text-decoration:none; color:#fff;}
#blocks-rt-46:hover { cursor:pointer; overflow:hidden; height:36px; line-height:36px; width:213px; padding-left:20px;background:url(/images/catshover.png) no-repeat;text-decoration:none; color:#2c2f3d;}

46 - это айди категории, если вам будет нужно для другой категории сделать что-то подобное, меняем лишь айди как на примере выше и пишем нужные стили.

Comments

Плюс (или минус) такого решения в том, что можно выделенную категорию перемещать вверх/вниз, она все равно будет другого цвета)

Answer 2

Здравствуйте!

Хм, странно, действительно не срабатывает :last-child , вообще-то срабатывает, но только для категории пульты, выделяет эти скобки с количеством 250 в красный...

Ну пробуйте тогда с помощью js 

Так:

<script type="text/javascript">
$(document).ready(function(){
$(".cat-blocks div:contains('World of Tanks')").css("background", "url(/images/world_of_tanks.png) no-repeat");
});
</script>

 

Или так:

<script type="text/javascript">
$(document).ready(function(){
$(".cat-blocks div:last").css("background", "url(/images/world_of_tanks.png) no-repeat");
});
</script>

код вставляете на нужных страницах перед </body>, а вообще можно в любую часть))

оба варианта рабочих, но какой захотите, такой и выбирайте, удачи! 

Comments

Вовчик, зачем скрипт если это легко делается с помощью стилей, для каждого решения писать java script не есть хорошо,  даже для такого мелкого. Требуется просто выделить определенную категорию вот и все.

---

Yuri_G, не знаю, но css почему-то не срабатывает, как я написал выше... он срабатывает для категории пульты, но я смотрел там нет никакого дива, а стили почему-то применяются к этой категории, где цифры написаны... А вот js не выпендривается и сразу стили применились...