CSS. Селектор по атрибуту id.
Еще один способ, как можно выбрать элемент на веб-странице для применения к нему стилей CSS — это использовать так называемый селектор id или по идентификатору.
Как это работает?
Предположим у нас на веб-странице есть какой-ли элемент, у которого есть атрибут id со значением, предположим, test.
<ul> <li>Элемент 1</li> <li>Элемент 2</li> </ul>
Каким образом мы можем применить стили CSS только к тому элементу, который имеет атрибут id со значением test?
Для этого в CSS используется специальный символ решетка «#», далее указывается то значение атрибута id, к которому нужно применить стили и далее указываются стили, которые должны быть применены к этому элементу.
#test {
color:blue;
}Особенность атрибута id в том, что мы не можем применять несколько атрибутов id с одним и тем же значением в пределах одной страницы. Атрибут id — это уникальный идентификатор. Для того, чтобы не возникало каких-либо ошибок, у нас в пределах одной веб-страницы не должно быть двух и более элементов с одинаковым значением атрибута id.
Для стилей CSS одинаковые значения атрибутов id особого значения может не иметь, но для Javascript скриптов — это может критично и программа может завершиться с ошибкой.
Таким образом вы можете выбирать элементы по их идентификатору и применять к ним стили CSS, т.е. те стили оформления, которые вы хотели бы у них видеть.
Посмотрите следующее видео, чтобы увидеть, что будет если в пределах одной веб-страницы использовать несколько элементов с одинаковым значением атрибута id.
[атрибут=»значение»] | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.
Синтаксис
[атрибут=»значение»] { Описание правил стиля }
E[атрибут=»значение»] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение атрибута. А во втором — только к определенным селекторам.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы атрибутов</title> <style> a[target="_blank"] { background: url(images/blank.png) 0 6px no-repeat; /* Фоновый рисунок */ padding-left: 15px; /* Смещаем текст вправо */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a> | <a href="link2" target="_blank">Ссылка в новом окне</a></p> </body> </html>
Результат примера показан ниже (рис. 1).
Рис. 1. Изменение стиля элемента в зависимости от значения атрибута target
В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.
Селекторы css по атрибуту, имени
элемент[атрибут] — данный селектор будет выбирать элементы с заданным атрибутом, каким-бы он ни был. Даже можно придумать свой. Работает в ie8.
Пример: img[alt] { border: 1px solid blue; } — все картинки, которые имеют alt
Пример: а[href][title] { color: green; } — свойство применяется только к тем ссылкам, которые имеют два атрибута одновременно.
Пример: a[dr] { background-color: yellow; } <a href=»#» dr=»yes»>ссылка</a> — применяет свойство к вашему атрибуту.
элемент[атрибут=значение] — применяет заданный стиль к элементу с указанным атрибутом и значением. Работает по точному совпадению значения атрибута.
Пример: a[href=»http://blogprogram.ru/retro.php»] { font-weight: bold; } — только к ссылке с данным url адресом
Пример: a[target=»_blank»] { color: green; } — к ссылки с таким типом открытия
Пример: a[id=»ar1″] { background-color: yellow; } — к ссылке с id = ar1
Пример: div[class=»are»] { background-color: yellow; } — к div-у с классом = are
Пример: input[name=»er2″] {width: 200px;} — по имени
Пример: input[value=»12″] {width: 200px;} — по значению поля
Есть различные типы атрибута:
[att~=value] — Атрибуты селектора должны быть разделены пробелами — список слов
[att^=value] — Значение атрибута начинается с заданного значения (”value”).
[att$=value] — Значение атрибута заканчивается на “value”.
[att*=value] — Значение атрибута содержит указанное значение (”value”).
Пример:
a[href*=».jpg»] {background: url(jpg.gif) no-repeat left 50%;}
a[href*=».pdf»] {background: url(pdf.gif) no-repeat left 50%;}
a[href*=».doc»] {background: url(word.gif) no-repeat left 50%;}
Читайте также
blogprogram.ru | 2014-02-19 | Селекторы css по атрибуту, имени | элемент[атрибут] — данный селектор будет выбирать элементы с заданным атрибутом, каким-бы он ни был. Даже можно придумать свой. Работает в ie8. При |
CSS :: Селектор по атрибуту
Селектор по атрибуту (от англ. attribute selector – селектор по атрибуту) выбирает элементы по значению атрибутов, а сам селектор берется в квадратные скобки. Если селектор применяется к конкретному типу элементов, то он пишется сразу после имени элемента без пробела.
Данный тип селекторов обладает мощным инструментом поиска по шаблону, например:
- [атрибут] – выбираются все элементы, у которых присутствует такой атрибут
вне зависимости от его значения, например,
[title] {блок объявлений}; - [атрибут=»значение»] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе
значение (здесь и далее учитывается также и регистр символов!), например,
[title="Оранжевый цвет текста"] {блок объявлений}; - [атрибут^=»значение»] – выбираются все элементы, у которых значение данного
атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например,
[title^="Красный цв"] {блок объявлений}; - [атрибут$=»значение»] – выбираются все элементы, у которых значение данного
атрибута заканчинается на подстроку, указанную в селекторе, например,
[title$="кста!"] {блок объявлений}; - [атрибут~=»значение»] – выбираются все элементы, у которых значение данного
атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например,
[title~="синий"] {блок объявлений}; - [атрибут*=»значение»] – выбираются все элементы, у которых значение данного
атрибута содержит подстроку, указанную в селекторе, например,
[title*="олетов"] {блок объявлений}.
[] {блок объявлений}
[<атрибут>=»<значение>»] {блок объявлений}
[<атрибут>^=»<значение>»] {блок объявлений}
[<атрибут>$=»<значение>»] {блок объявлений}
[<атрибут>~=»<значение>»] {блок объявлений}
[<атрибут>*=»<значение>»] {блок объявлений}
CSS3 | Селекторы атрибутов
Селекторы атрибутов
Последнее обновление: 21.04.2016
Кроме селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам
надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет
значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:
input[type="text"]{
border: 2px solid red;
}
После элемента в квадратных скобках идет атрибут и его значение. То есть в данном случае мы говорим, что для текстового поля надо установить границу красного цвета 2 пикселя толщиной сплошной линией.
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов в CSS3</title>
<style>
input[type="text"]{
border: 2px solid red;
}
</style>
</head>
<body>
<p><input type="text" /></p>
<p><input type="password" /></p>
<input type="submit" value="Send" />
</body>
</html>
Селекторы атрибутов можно применять не только к элементам, но и классам и идентификаторам. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов в CSS3</title>
<style>
.link[href="http://apple.com"]{
color: red;
}
</style>
</head>
<body>
<a href="http://microsoft.com">Microsoft</a> |
<a href="https://google.com">Google</a> |
<a href="http://apple.com">Apple</a>
</body>
</html>
Специальные символы позволяют конкретизировать значение атрибутов. Например символ ^ позволяет выбрать все атрибуты, которые начинаются на определенный текст. Например, нам надо выбрать все ссылки, которые используют протокол https, то есть ссылка должна начинаться на «https://». В этом случае можно применить следующий селектор:
a[href^="https://"]{
color: red;
}
Если значение атрибута должно иметь в конце определенный текст, то для проверки используется символ $. Например, нам надо выбрать все изображения
в формате jpg. В этом случае мы можем проверить, оканчивается ли значение атрибута src на текст «.jpg»:
img[src$=".jpg"]{
width: 100px;
}
И еще один символ «*» (звездочка) позволяет выбрать все элементы с атрибутами, которые в своем значении имеют определенный текст (не важно где — в начале, середине или конце):
a[href*="microsoft"]{
color: red;
}
Данный атрибут выберет все ссылки, которые в своем адресе имеют текст «microsoft».
кастомные атрибуты и другие стратегии автоматизации
От автора: селекторы элементов для Selenium WebDriver – один из компонентов ядра фреймворка автоматизации. Они ключ к взаимодействию с любым веб-приложением. В этом обзоре элементных селекторов автоматизации мы обсудим различные стратегии, узнаем их возможности, взвесим плюсы и минусы, а также посоветуем лучшие стратегии по селекторам – кастомные атрибуты и CSS селекторы.
Селекторы элементов Selenium
Выбор лучшей стратегии элементных селекторов критичен для успеха и упрощения работы с автоматизацией. При выборе селектора вы должны учитывать такие аспекты как простота использования, универсальность, онлайн поддержка, документация и производительность. Повышенное внимание к стратегии подходящих селекторов принесет свои плоды в будущем в виде легкой автоматизации.
Подобно тому, как следует учитывать технологический аспект элементных селекторов, также должна быть культура организации. Зрелая культура сотрудничества между разработчиками и QA позволит разблокировать высокие уровни успеха при внедрении элементных селекторов при автоматизации. Выгода организации лежит за пределами автоматизации. Закладывается основа сотрудничества в других областях жизненного цикла разработки ПО.
Все примеры кода будут на Python и Selenium WebDriver, но они будут применимы к любому языку программирования и фреймворку.
HTML пример:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЯ буду использовать следующий HTML меню для примеров в этом разделе:
<div> <div><a href=»/home»>Home</a></div> <div><a href=»/shop»>Shop</a> <div> <a href=»/shop/gizmo»>Gizmo</a> <a href=»/shop/widget»>Widget</a> <a href=»/shop/sprocket»>Sprocket</a> </div> </div> </div>
<div> <div><a href=»/home»>Home</a></div> <div><a href=»/shop»>Shop</a> <div> <a href=»/shop/gizmo»>Gizmo</a> <a href=»/shop/widget»>Widget</a> <a href=»/shop/sprocket»>Sprocket</a> </div> </div> </div> |
Плохо: названия тегов, текст ссылок, частичный текст ссылок и названия
Я не буду долго останавливаться на них, так как все они используются ограничено. Это плохой выбор для широкого применения во всем фреймворке автоматизации. Они решают определенные потребности, которые легко можно покрыть другими стратегиями элементных селекторов. Используйте их только, если вам необходимо обработать определенный кейс. Даже тогда почти все специальные кейсы не настолько специальны, чтобы использовать их. Эти инструменты можно использовать в сценарии, когда другие селекторы вам недоступны (кастомные теги или id).
Пример:
С помощью названия тега можно выбрать большую группу элементов, которые подпадают под выбранный тег. Применение ограничено, так как работает только, когда необходимо выбрать большие группы элементов одного типа. Пример ниже вернет все 4 div из примера выше.
driver.find_elements(By.TAG_NAME, «div»)
driver.find_elements(By.TAG_NAME, «div») |
С помощью примеров ниже можно выбрать ссылки. Как видите, методы выбирают ссылки только по тегу a и только по тексту тега:
driver.find_elements(By.LINK_TEXT, «Home») driver.find_elements(By.PARTIAL_LINK_TEXT, «Sprock»)
driver.find_elements(By.LINK_TEXT, «Home») driver.find_elements(By.PARTIAL_LINK_TEXT, «Sprock») |
Вы можете выбрать элементы по атрибуту name, но в нашем примере с HTML у тегов нет атрибута name. Эта проблема будет почти в любом приложении, так как обычно этот атрибут не добавляется во все теги. Если бы в главном меню был атрибут name
<div name=»menu»></div>
<div name=»menu»></div> |
Элемент можно было бы выбрать через:
driver.find_elements(By.NAME, «menu»)
driver.find_elements(By.NAME, «menu») |
Как видите, использование этих стратегий элементных селекторов ограничено. Подходы ниже лучше подходят, так как они более универсальные, и возможностей в них больше.
Обобщение: названия тегов, текст ссылок, частичный текст ссылок и названия
Хорошо: XPath
XPath – универсальная и способная стратегия элементных селекторов. Она также моя любимая. XPath умеет выбирать любые элементы на странице, вне зависимости от того, есть у них классы и ID (хотя без классов и ID становится сложно поддерживать код, он становится хрупким). Этот вариант универсален, так как вы можете выбирать родительские элементы. XPath также обладает множеством встроенных функций, с помощью которых можно настраивать выборку элементов.
С универсальностью приходит сложность. С помощью XPath можно делать почти что угодно, поэтому изучать его сложнее, чем другие стратегии элементных селекторов. Сложность компенсируется отличной онлайн документацией, которую легко найти. Один из замечательных ресурсов – уроки по XPath на W3Schools.com.
У XPath есть свои компромиссы. Вы можете выбирать родительские элементы, у вас под рукой множество встроенных функций, однако XPath плохо работает в IE. Это стоит учитывать при выборе стратегии элементных селекторов. Если вам нужна возможность выбора родительских элементов, вам необходимо задуматься о том, как выбор повлияет на кроссбраузерное тестиование в IE. Для запуска автоматических тестов в IE потребуется больше времени. Если пользовательская база вашего приложения не сидит на IE, этот выбор вам подойдет, так как вы сможете реже запускать тесты в IE. Если наоборот, то XPath должен стать фолбеком, если другие лучшие подходы не работают для вашей организации.
Пример:
Если у вас в требованиях прописана возможность выбора родительских элементов, вам нужен XPath. Как это сделать: на нашем примере предположим, что вам необходимо выбрать родительский блок главного меню, зная одну из ссылок внутри этого элемента:
driver.find_elements(By.XPATH, «//a[id=menu]/../»)
driver.find_elements(By.XPATH, «//a[id=menu]/../») |
Этот селектор найдет первый экземпляр ссылки с id = menu, далее с помощью «/../» селектор поднимется на родительский элемент. В результате вы получите родительский блок главного меню.
Обобщение XPath
Отлично: id и class
ID и class – 2 разных способа в автоматизации, выполняющие разные функции в приложении. Однако при выборе стратегии для автоматизации они слегка отличаются, и их нельзя рассматривать отдельно. В приложении атрибуты id и class позволяют UI разработчикам манипулировать и стилизовать приложение. В автоматизации мы с их помощью ищем элементы для взаимодействия.
Большой плюс в использовании ID и class в том, что они мало подвержены структурным изменениям в приложении. Если бы вы создали XPath или CSS селектор, в основе которого лежит цепочка из нескольких элементов и дочерних элементов, что будет, когда функциональный запрос прервет эту цепь, добавив в нее новые элементы? С ID и class вы можете искать элементы, не полагаясь на структуру страницы. Вы сохраняете надежность автоматизации и не слишком снисходительны к изменениям. Изменения должны замечаться в автоматизации, после создания тест кейсов по поиску определенных элементов. Изменения не должны ломать весь сьют автоматизации. Однако если разработчик вносит изменения напрямую в ID или class, используемые в автоматизации, это повлияет на тесты.
Эта стратегия будет неприменима, если приложение под тестом не будет реализовывать ID и class как часть лучших практик разработки. Если в HTML нет id и class для автоматизации, подход будет сложно использовать.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПример:
Если необходимо выбрать элемент меню верхнего уровня, это можно сделать так:
driver.find_elements(By.ID, «main-menu»)
driver.find_elements(By.ID, «main-menu») |
Выбрать первый пункт меню можно так:
driver.find_elements(By.CLASS_NAME, «menu»)
driver.find_elements(By.CLASS_NAME, «menu») |
Обобщение: id и class
Лучше всего: кастомные атрибуты и CSS селекторы
Если ваши тестировщики хорошо общаются с разработчиками, есть шанс, что вы сможете использовать эту лучшую практику в автоматизации. У кастомных атрибутов и CSS селекторов множество преимуществ как для команды тестировщиков, так и организации. У тестировщиков это позволяет автоматизаторам искать определенные элементы без создания сложных селекторов. Однако необходимо уметь добавлять кастомные атрибуты, чтобы автоматизаторы могли использовать их в приложении. Для использования этот подхода разработчики и тестировщики должны работать вместе.
Необходимо отметить, что CSS селекторы не зависят от кастомных атрибутов. CSS селекторы могут находить любые теги и атрибуты в HTML документе, как и XPath.
Разберем сущность подхода. Для лучшей реализации команда автоматизации должна понимать, что им необходимо искать в автоматизации. Работая с разработчиками, скорее всего, front end, тестировщикам необходимо разработать шаблон кастомного атрибута, который будет использоваться во всех необходимых элементах для автоматизации. Например, мы добавим атрибут tid к целевым элементам.
Важно также отметить техническую ограниченность CSS селекторов. Они изначально не рассчитывались на выбор родительских элементов, как в XPath. Это было сделано, чтобы избежать бесконечного зацикливания в стилях CSS на страницах. Для веб-дизайна это хорошо, но для автоматизации это ограничение. К счастью, это ограничение можно преодолеть с помощью кастомных атрибутов. Тестировщики будут вызывать подходящий кастомный атрибут, не нужно искать родительский элемент.
Если в вашей организации еще не налажена работа между тестировщиками и разработчиками, не беспокойтесь! Вам все равно нужно использовать эту стратегию, так как она может стать тем механизмом, который запустит общение. Независимо от существования культуры общения в коллективе, вам стоит попробовать этот подход и посмотреть, что получится. Вы получите не только простую в обслуживании стратегию, но и получите плюсы от общения разных областей в компании. Совместные развивающиеся отношения принесут вам пользу во многих аспектах обеспечения качества, таких как снижение дефектов, сокращение времени выхода на рынок и повышение производительности.
Чтобы лучше внедрить эту стратегию и создать коллаборацию, ваши тестировщики должны быть вовлечены в процесс дизайна с самого начала. Работая с разработчиками, они должны смотреть требования. По мере разработки функций тестировщики должны предлагать, куда необходимо добавить кастомные атрибуты для лучшей поддержки в автоматизации. Поощрив эту коллаборацию в начале разработке дизайна, вы сблизите команды тестировщиков и разработчиков и улучшите эффективность разработки. Вероятнее всего, это приведет к эффекту перелива в другие области жизненного цикла разработки ПО. Поощрение такой коллаборации познакомит разработчиков и тестировщиков, и возможно, подобные коллаборации появятся в других областях.
Пример:
Реализация кастомных атрибутов в тегах ссылок в нашем HTML примере выглядела бы так:
<div> <div><a tid=»home-link» href=»/home»>Home</a></div> <div><a tid=»shop-link» href=»/shop»>Shop</a> <div> <a tid=»gizmo-link» href=»/shop/gizmo»>Gizmo</a> <a tid=»widget-link» href=»/shop/widget»>Widget</a> <a tid=»sprocket-link» href=»/shop/sprocket»>Sprocket</a> </div> </div> </div>
<div> <div><a tid=»home-link» href=»/home»>Home</a></div> <div><a tid=»shop-link» href=»/shop»>Shop</a> <div> <a tid=»gizmo-link» href=»/shop/gizmo»>Gizmo</a> <a tid=»widget-link» href=»/shop/widget»>Widget</a> <a tid=»sprocket-link» href=»/shop/sprocket»>Sprocket</a> </div> </div> </div> |
Заметили новый атрибут в некоторых элементах? Мы создали новый атрибут, который не конфликтует с другими атрибутами HTML, и назвали его tid. С помощью этого кастомного атрибута мы можем использовать CSS селектор для поиска элемента:
driver.find_element(By. CSS_SELECTOR, «[tid=home-link]»)
driver.find_element(By. CSS_SELECTOR, «[tid=home-link]») |
Например, вы хотели выбрать все ссылки в меню, неважно верхний это уровень или подменю. С помощью CSS селекторов можно создать крайне универсальный селектор:
driver.find_element(By.CSS_SELECTOR, «#main-menu [tid*=’-link’]»)
driver.find_element(By.CSS_SELECTOR, «#main-menu [tid*=’-link’]») |
Запись *= осуществляет поиск по шаблону значения «-link» внутри поля tid во всех элементах. Если разместить его за ID #main-menu, поиск будет произведен по элементам внутри главного меню.
Вы также можете принять эту стратегию без кастомных атрибутов. Например, вы можете искать ссылки в подменю Shop следующим образом:
driver.find_element(By. CSS_SELECTOR, «#main-menu .submenu a»)
driver.find_element(By. CSS_SELECTOR, «#main-menu .submenu a») |
Эта стратегия позволит автоматизаторам писать надежные автотесты, которые будет легко обслуживать, и которые не будут ломаться при незначительном изменении UI. Эта стратегия – лучший подход. Ее не только будет легко обслуживать в автоматизации, но она приведет к общению между командами тестировщиков и разработчиков.
Обобщение: кастомные атрибуты и CSS селекторы
Заключение
Есть несколько отличных вариантов реализации стратегии элементных селекторов корпоративного стандарта в вашей системе автоматизации. Варианты типа названий тегов или текста ссылок лучше избегать, если они не единственные среди доступных. XPath, ID и class – хороший подход. На данный момент лучший подход – кастомные атрибуты и поиск элементов по CSS селекторам. Он также приведет к общению между разработчиками и тестировщиками.
Сравнение вариантов:
Автор: Tim Harrison
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть[атрибут|=»значение»] | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class.
Синтаксис
[атрибут|=»значение»] { Описание правил стиля }
E[атрибут|=»значение»] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блок</title>
<style>
div[class|="block"] {
background: #306589; /* Цвет фона */
color: #acdb4c; /* Цвет текста */
padding: 5px; /* Поля */
}
div[class|="block"] a {
color: #fff; /* Цвет ссылок */
}
</style>
</head>
<body>
<div>
<h3>Термины</h3>
<div>
<ul>
<li><a href="t1.html">Буквица</a></li>
<li><a href="t2.html">Выворотка</a></li>
<li><a href="t3.html">Выключка</a></li>
<li><a href="t4.html">Интерлиньяж</a></li>
<li><a href="t5.html">Капитель</a></li>
<li><a href="t6.html">Начертание</a></li>
<li><a href="t7.html">Отбивка</a></li>
</ul>
</div>
</div>
</body>
</html> В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.