RabotaFree.com | Все о работе в интернете!

И так, сегодня я Вам расскажу, как обратиться к элементу по значению его атрибута. Зачем это нужно? Да всё просто, скажем у Вас есть интернет-магазин, есть меню, и Вы хотите выделить один из пунктов меню, но вот беда, у пунктов нет идентификатора. То есть обратиться на прямую к нему нельзя.

К примеру, у Вас есть такой код, и выделить Вам нужно пункт меню «Мониторы», распродажа у Вас.

<h3>Компьютеры</h3>
<ul>
<li><a href="/kompyutery/personalnye-kompyutery">Персональные компьютеры</a></li>
<li><a href="/kompyutery/nettopy-i-monobloki">Неттопы и моноблоки</a></li>
<li><a href="/kompyutery/monitory-1">Мониторы</a></li>
<li><a href="/kompyutery/akusticheskie-sistemy">Акустические системы</a></li>
</ul>

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

a[href="/kompyutery/monitory-1"] {
color: red;
}

То есть мы указываем тэг (в данном случае а), атрибут – href и его значение "/kompyutery/monitory-1». Стиль применяется только к элементом удовлетворяющим данные требования.

https://jsfiddle.net/7cmjz2rb/ - посмотрите как это работает

Кто-то может возразить, а что делать с другими ссылками на сайте, которые ссылаются на тот же раздел, я не хочу менять для них стиль, мне что везде прописывать им идентификатор? В данном случае достаточно уточнить условие.

.menu a[href="/kompyutery/monitory-1"] {
color: red;
}

То есть мы указываем, что меняем цвет только для ссылок лежащих внутри элемента с классом “menu”. Ну или любым другим, который у Вашего меню.
https://jsfiddle.net/7cmjz2rb/1/