Блог Блог CSS. Обращение к элементу по значению атрибута
CSS. Обращение к элементу по значению атрибута PDF Печать E-mail

Многие из нас утверждают, что знают CSS, но это не так, не смотря на то, что CSS – это мягкий и добрый язык, знают его на должно уровне далеко не все, я бы даже сказал словами классика: «не многие сейчас могут знать CSS на должном уровне, вернее мало кто может это делать».

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

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

<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/
 
Друзья, если Вас интересует https://svetlife.ru/, настоятельно рекомендую Вам посетить сайт svetlife.ru, также вы там сможете найти оптовую продажу люстр, бра, светильников торшеров и много другого.
 

 

Добавить комментарий

Защитный код
Обновить