[атрибут$=значение] в CSS


Содержание

HTML Attributes

Атрибуты предоставляют дополнительную информацию о HTML-элементах.

Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют Дополнительные сведения об элементе
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты обычно поставляются в парах «имя/значение», например: name=»value»

Атрибут href

Пример

Вы узнаете больше о ссылках и тег далее в этом учебнике.

Атрибут src

HTML-образы определяются тегом .

Имя файла источника изображения указывается в атрибуте src :

Example

Атрибуты ширины и высоты

Изображения в HTML имеют набор атрибутов size, который определяет ширину и высоту изображения:

Пример

Размер изображения указан в пикселях: w , означает 500 пикселей в ширину.

Вы узнаете больше об изображениях в наших HTML-изображениях Глава.

The alt Attribute

Атрибут alt указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.

Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то «прослушивание» на веб-странице, например, слепой человек, может «слышать» элемент.

Пример

Атрибут alt также полезен, если изображение не существует:

Пример

Посмотрите, что произойдет, если мы попытаемся отобразить изображение, которое не существует:

Атрибут style

Атрибут style используется для указания стиля элемента, например цвета, шрифта, размера и т. д.

Пример

I am a paragraph

Вы узнаете больше о стилизации позже в этом учебнике, и в нашем Учебник по CSS.

Атрибут lang

Язык документа может быть объявлен в теге .

Язык объявляется с атрибутом lang .

Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:

CSS селекторы атрибутов и их разновидности

Здравствуйте, уважаемы читатели! В сегодняшней публикации мы продолжим изучение основ CSS и я предложу Вам описание различных вариаций селекторов атрибутов, причем теоретические выкладки можно будет подкреплять практическими действиями, используя встроенные инструменты всех популярных браузеров (тут — о понятии browser и сравнение лучших web-обозревателей), например, расширение Firebug для Firefox, о котором я подробно писал.

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

Было сделано еще немало полезного, обо всех предпринятых мной шагах обязательно подробно расскажу в ближайших публикациях. Ну, и в-третьих, получил позитивный заряд, тесно пообщавшись с друзьями и родными во время рождественских и новогодних праздников. Кстати, пользуясь случаем, хочу пожелать всем читателям блога здоровья, успехов, любви и семейного благополучия в Новом Году! Такие пожелания никогда не бывают запоздалыми, если идут от чистого сердца.

А теперь перехожу потихоньку непосредственно к теме сегодняшней публикации. Напомню, что мы с вами уже рассматривали некоторые виды CSS селекторов, такие как идентификаторы, классы (class) и селекторы тегов. Сегодня продолжим изучение этой важной части курса каскадных таблиц стилей (CSS) и познакомимся с селекторами атрибутов и их разнообразными вариациями.

Перед тем, как начать изложение материала, еще раз хочу напомнить, что темы и объем статей очень тщательно мной проработаны и ориентированы прежде всего на начинающих. Но не исключаю, что и опытные вебмастера найдут для себя толику чего-то полезного. Поэтому те, кто в дальнейшем хочет сэкономить средства и время при редактировании или даже создании с “нуля” своего вебсайта, ни в коем случае не должны пренебрегать изучением стилей CSS, тем более, что я пытаюсь излагать материалы ясно, доступно, и, вместе с тем, компактно.

Надеюсь, вы простили мне это небольшое отступление, оно было важным и совершенно к месту, я в этом уверен. Теперь возвращаюсь к нашим баранам, то бишь селекторам атрибутов, многочисленные вариации которых подробно представлю ниже. Однако, для начала нужно провести некоторые приготовления, поскольку урок будет объемным и, что самое важное, вы сразу после каждого пункта теории сможете проверить все на практике прямо по ходу статьи. Заинтриговал?

На самом деле, все просто. Современное развитие web-технологий позволяет делать подобные вещи легко и просто. Я имею ввиду использование такого инструмента как, например, Firebug для Firefox, о котором я упомянул в начале поста. Однако, я написал уже о нем достаточно подробно, поэтому в этой статье буду использовать аналогичный инструмент для другого популярного браузера Google Chrome (тут о нем подробнее).

Этот инструмент уже встроен изначально в последних версиях Хрома. Кстати, подобные встроенные расширения имеют все наиболее популярные браузеры, включая IE и Opera (как скачать, установить, обновить, настроить). Итак, для начала открываем любую страницу любого ресурса (можно своего сайта) в Google Chrome (желательно, чтобы это была последняя версия).

Выделяем какой-нибудь элемент на вебстранице (для примера я выделю один из абзацев сегодняшней статьи) и кликаем правой кнопкой мыши. Из контекстного меню выбираем “Просмотр кода элемента” (альтернативой является простое нажатие клавиши F12 на клавиатуре). В нижней части появится окно, подобное окну Firebug, в левой части которого будет находиться html код выделенного элемента со всеми тегами, справа — стили CSS.

По моему мнению, самым наглядным примером для проработки селекторов атрибута с разными вариациями является тег абзаца p и атрибут title (не путать с тегом title), который определяет содержание всплывающей подсказки. Если вы читали статью об основах блочной верстки, то представляете себе роль тега div, который является основным строительным материалом современных сайтов.

Если желаете, можете поочередно открыть контейнеры div, нажимая на расположенный слева черный треугольный значок, пока не доберетесь до тегов p, содержание которых отображается на странице в виде текста, разделенного на параграфы (или абзацы, что одно и то же).

Далее, подведите курсор к началу контейнера div, содержащего теги p и нажмите правую кнопку мыши. Из появившегося контекстного меню необходимо выбрать “Edit as HTML”.

Появится окруженное рамкой пространство, в пределах которого можно осуществлять редактирование, а именно, удалять, изменять или добавлять текст:

В этом окне для редактирования составим три абзаца, применив к тегу p атрибут title, который вызывает всплывающую подсказку. Например, так:

1. Абзац (или параграф, что одно и то же, напоминаю), описывающий сроки обновления WordPress:

2. Параграф, дающий информацию о расширениях (плагинах):

3. Параграф о продолжительном отсутствии обновлений плагинов:


Итак, мы внесли все три абзаца в поле для редактирования в окне инструмента разработчика. Для того, чтобы утвердить сделанные изменения, просто кликните левой кнопкой мышки и текст всех трех абзацев появится на вебстранице именно в том месте, где должен быть.

Как видите, текст всплывающей подсказки строго тождественен значению атрибута title (для каждого параграфа это значение свое). HTML каркас для наших экспериментов создан, теперь переходим непосредственно к тому, как изменить их вид с помощью свойств CSS.

Простой селектор атрибута и селектор атрибута со значением

Простой селектор атрибута устанавливает стиль для элемента, если задан специфический атрибут какому-нибудь тегу (для нашего примера это тег p и атрибут title), причем значение атрибута в данном конкретном случае неважно. Синтаксис CSS будет выглядеть следующим образом:

Наименование атрибута заключается в квадратные скобки и пробел между именем селектора и атрибутом не допускается. Выше на схеме даны два варианта использования: с указанием имени селектора и без оного.

  • В первом случае заданный стиль CSS применяется ко всем тегам, которым соответствует заданный атрибут;
  • Во втором случае стиль будет применен только к определенным тегам.

Как вы понимаете, свойства CSS для каждого элемента, в том числе тега абзаца p, задаются в документе style.css. Еще раз напоминаю, что для практического закрепления теории мы используем великолепный инструмент html и CSS редактирования, где в левой части окна добавили три абзаца, каждый со своим значением title.

Изменения в коды html и CSS мы вносим “на лету” на любой странице абсолютно любого ресурса (можете использовать одну из страниц моего блога, если так будет удобнее). В этом и преимущество подобных инструментов, которыми обладают все популярные браузеры, что даже человек, не имеющий своего сайта, может поэкспериментировать и получить необходимую практику.

Итак, после добавления абзацев их текст должен отобразиться на вебстранице (только не перезагружайте страницу во время практического занятия, иначе результаты сделанных вами изменений исчезнут). Далее необходимо прописать CSS правило для простого селектора. Для этого в правой части вебмастерского инструмента кликаем по ссылке, которая ведет к документу со стилями CSS (например, файл style.css):

После нажатия на ссылку получаем полную версию файла style.css, который можно сразу же редактировать онлайн. То есть удалять, изменять или вносить новые стили.

Пропишем правило CSS для простого селектора атрибута следующим образом:

Внесем его прямо в конец файла style.css в окне редактирования инструмента разработчика:

После такого редактирования текст всех абзацев примет зеленую окраску, поскольку для каждого из них указан атрибут title, вызывающий всплывающую подсказку.

как уже было сказано, значение title в данном случае неважно, поскольку не отмечено в правиле CSS. Далее. Применим теперь селектор атрибута со значением и посмотрим, как изменится текст всех трех подопытных параграфов. Синтаксис написания CSS правила в этом случае будет таким:

Для этого допишем к title значение:

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

Ниже рассмотрим еще несколько вариантов использования селектора атрибута.

Селектор атрибута со значением, содержащим указанный текст и одно из нескольких значений атрибута

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

Оператор «*» означает, что если в значении атрибута находится определенное слово или его часть, причем совершенно неважно, в каком месте (в начале, середине или конце), то к тегу с этим атрибутом и будет применено данное правило стилей. Продолжим практические изыскания. Напомню содержания трех параграфов и значения title для каждого из них:

Составим в соответствии с представленным выше синтаксисом правило стилей (можно заменить на него ранее прописанное там же, в левой части окна используемого нами инструмента:

Сразу после редактирования можете наблюдать, что текст всех абзацев станет зеленым, поскольку в значении атрибута title каждого из них присутствует «Word» как часть слова «Wordpress».

Случается иногда так, что прописаны несколько значений атрибута, разделенных пробелом. Это относится совершенно к любым тегам, например, к контейнеру div, который может содержать несколько классов (class) с разными значениями, являющимися в данном случае атрибутами.

Но мы будем продолжать рассматривать пример с тегом p и атрибутом title, так как он самый наглядный, особенно для начинающих. Кроме того, экспериментируя с одними и теми же объектами, можно более наглядно увидеть разницу при использовании различных вариаций селектора атрибутов.

Чтобы применить особый стиль в отношении одного из значений атрибута, разделенных пробелом, можно использовать оператор «

»; синтаксис написания будет следующий:

Применительно к тем же абзацам, которые рассматриваем в сегодняшней публикации, определим следующее стилевое правило, указав в значении атрибута слово «Wordpress»:

Теперь текст первого и третьего параграфа окрасится в зеленый цвет, потому что только для этих абзацев в значении атрибута title встречается слово «Wordpress», отделенное от остального текста пробелом. Текст второго параграфа остался таким же. Почему, ведь в значении title тоже есть WordPress? Да потому что это слово в значении title для второго абзаца разделено не пробелом, а знаком дефиса «-».

Итак, мы уяснили, что действия оператора «

» распространяются на фрагмент текста, разделенный пробелом. То есть, на одно из нескольких значений того или иного атрибута, которые отделены друг от друга пробелами. В нашем случае при использовании атрибута title значения, отделенные пробелами, и есть отдельные слова в значении title.

Фу-у-у, аж в пот бросило от усердия, но зато, похоже, разжевал все до мельчайших частиц, чтобы начинающим было понятно. Идем дальше и разберем еще несколько случаев применения селекторов атрибута. Наберитесь терпения, осталось немного, хотя по моим ощущениям, все должно быть интересно, когда вы можете на практике проверять постулаты теории.

Селекторы CSS: значение атрибута начинается с определенного текста, заканчивается определенным текстом и дефис в значении атрибута

Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута. Поскольку пост получается достаточно объемным, еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title (всплывающая подсказка) прямо в поле инструмента для онлайн редактирования браузера Google Chrome. Этот инструмент вызывается, в частности, простым нажатием клавиши F12.

Теперь обратимся к изучению еще нескольких вариантов селектора атрибута, а именно: когда значение атрибута начинается с определенного текста, заканчивается определенным текстом и когда в значении атрибута присутствует дефис.

Все эти тонкости в использовании различных вариантов значений атрибутов позволяют создать действительно гибкую систему для оформления странниц web-сайта. Сейчас взглянем на воздействие оператора «^», который указывает на то, что в значении атрибута присутствует текст или слово, с которого начинается значение атрибута данного тега. Немного запутались? Сейчас все поймете. Прежде дам синтаксис написания стилевого правила, когда значение атрибута начинается с определенного текста:

Следующим шагом пишем новое правило CSS опять же применительно к нашим подопытным абзацам:

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

Это произошло потому, что значение атрибута title обоих первых параграфов начинается со слова «Wordpress». В значении title третьего параграфа это слово также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».

На страницах блога я писал о создании html гиперссылок и упоминал об абсолютных и относительных ссылках. Так вот, можно по-разному оформить внутренние и внешние ссылки ресурса, используя именно значок оператора «^».

Дело в том, что внутренние ссылки можно сделать относительными, то есть без использования наименования протокола «http://». В то время как внешние ссылки другими как абсолютными быть не могут и всегда начинаются с «http://». Поэтому, создав такое правило:

Илон Маск рекомендует:  Свойства текста в CSS

Мы получим красный цвет внешних ссылок на сайте. Как вы, наверное знаете, гиперссылки создаются с помощью тега a, а href является атрибутом, который указывает url адрес. Поэтому линки, начинающиеся с «http://», приобретают красную окраску. Идем дальше. Можно также использовать селектор атрибута со значением, заканчивающимся определенным текстом. Для этого используется оператор «$». В нашем случае синтаксис будет выглядеть так:

Теперь прописываем CSS свойства для нашего случая:

После этого в зеленый цвет окрасится только третий абзац, потому что значение title для него заканчивается словом «Wordpress». Вы немедленно можете в этом убедиться, прописав это правило вместо предыдущего в левой части окна редактирования CSS кода инструмента, который сегодня мы все время задействуем. Еще один пример использования оператора «$». Если вы хотите разделить ссылки, которые ведут на ресурсы с доменом .ru от остальных.

В этом случае все ссылки, заканчивающиеся на .ru, окрасятся красным. Ну, и последний оператор, который делает систему применения свойств CSS более гибкой, это «|». С его помощью можно применить селектор атрибута со значением, в котором есть дефис. Синтаксис:

Для нашего примера это будет выглядеть следующим образом:

В данном случае текст второго абзаца будет зеленым, остальные будут оформлены стандартным образом:

Это произошло потому, что именно в значении title второго абзаца есть дефис, которым отделено первое слово от остального текста. Еще один пример, когда может использоваться оператор «|» — это классы, название которых состоит из нескольких частей, разделенных дефисом, как на ниже следующем скриншоте:

Как известно, классы присваиваются преимущественно контейнерам, образованным основным тегом блочной верстки div. Но в данном случае class будет служить его атрибутом. Поэтому можно записать правило CSS следующим образом:

Теперь эти свойства будут определять оформление контейнеров, название класса которых первым содержит слово «left», отделенное дефисом от другой части наименования. Ну вот, пожалуй на сегодня все. Потратил немало энергии при написании этой статьи, зато получил моральное удовлетворение от хорошо выполненной работы. Однако, на то, чтобы сделать вывод, силы еще остались.

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

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

Кроме того, современный вебмастер все-таки должен обладать хотя бы базовыми знаниями CSS, поскольку это в значительной степени поможет сэкономить в дальнейшем массу времени и сил. Это проверено на собственном опыте, поэтому и утверждаю это с такой уверенностью. Не забывайте подписываться на получение новых материалов блога, пока.

Селекторы атрибутов

На этой странице


Обзор

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

[attr] Обозначает элемент с атрибутом по имени attr. [attr=value] Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value. [attr

=value] Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value [attr|=value] Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно «value» или может начинаться с «value» со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подкодом. [attr^=value] Обозначает элемент с именем атрибута attr значение которого начинается с «value» [attr$=value] Обозначает элемент с именем атрибута attr чье значение заканчивается на «value» [attr*=value] Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки «value» как подстроки.

Часть 5. Селекторы атрибутов

С помощью CSS селекторов атрибутов (англ. attribute selectors) вы можете задавать стиль тем тегам, которые имеют указанные атрибуты. Пример: вы желаете присвоить определенный стиль всем фотографиям, которые имеют атрибут title , не затрагивая все остальные изображения. Делается это просто:

Как видим, атрибут title записан в квадратных скобках после названия img , затем идет блок объявлений. А что если вам понадобится создать стиль только для тех изображений с атрибутом title , которым присвоен определенный класс, скажем, .gallery ? В таком случае это записывается так:

Атрибуты со значениями

Можно делать выборку элементов, у которых имеется определенное значение атрибута. Пример: делаем рамку для изображений, у которых есть атрибут title со значением portrait :

Выборка по началу текста

Селекторы атрибутов также могут пригодиться при оформлении ссылок. Представьте, что вам нужно особым образом выделить все адреса URL с протоколом https:// . Для этого достаточно описать, как выглядит начало адреса URL:

Обратите внимание на символ ^ , который в переводе на наш язык означает «начинается с». Используя его, вы можете придавать свой стиль различным ссылкам (и не только им). Например, чтобы изменить цвет всех ссылок, которые ведут на главную или другие страницы https://google.com , нужно записать:

Обратите внимание на то, что наш стиль будет применен строго к тем ссылкам, которые начинаются так https://google.com . Другие варианты написания ссылок, например, https://www.google.com или http://google.com , необходимо записывать отдельно. Пример:

Выборка по концу текста

А может быть вы желаете красиво оформить все ссылки на файлы с расширением .rar ? Тогда вам понадобится описать, как выглядит окончание URL:

Не забудьте указать после названия атрибута символ $ , который означает «заканчивается на».

Итоги

Селекторы атрибутов в CSS позволяют задавать стиль элементам веб-страницы в зависимости от наличия у них определенных атрибутов.

С помощью селекторов атрибутов можно также осуществлять выборку тех элементов, у которых имеется определенное значение атрибута.

Можно делать точную выборку элементов веб-страницы по началу или концу текста в значении атрибута.

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

CSS-селекторы в GTM. Часть I

Если в Google Analytics одной из самых непростых тем для изучения по-праву считают регулярные выражения (из-за сложного восприятия и запоминания синтаксиса команд, метасимволов), то в этой, пожалуй, ей равнозначны именно css-селекторы, поскольку знания в данной области лежат далеко за пределами анализа статистики и построения отчетов.

Но как только вы научитесь правильно использовать селекторы CSS в Google Tag Manager, то забудете о сторонней помощи программистов по многим задачам. Здесь больше именно веб-разработки, но без спецсимволов из регулярных выражений все равно не обошлось.

В процессе настройки аналитики часто приходится отслеживать клики по определенным элементам на странице сайта. Все просто, если у отслеживаемых элементов (кнопки, ссылки, формы и т.д.) есть атрибуты id или class. Например, как здесь (инспектирование кода веб-страницы в консоли разработчика):

Атрибуты id и class у элемента на сайте

В Google Tag Manager для активации тега на данный элемент остается только настроить триггер со встроенными переменными Click Classes и Click ID.

Пример условия активации триггера по Click ID

Но часто бывает, что у необходимого элемента нет таких атрибутов. Тогда на помощь приходят css-селекторы.

Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль.

CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных, таких как «Видимость элемента», «Элемент DOM» и «Собственный код JavaScript».

CSS-селекторы в триггерах и переменных GTM

Если атрибут нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Но если один и тот же класс используется в нескольких элементах на странице, тогда рекомендуется использовать селекторы CSS.

Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.

Но прежде чем разбираться в селекторах, рекомендую для начала ознакомиться с глобальной структурой документа в формате HTML – какие бывают элементы, заголовки, атрибуты, метаданные и т.д.

Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как

Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.

Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.

DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:

Представление DOM этого документа HTML выглядит следующим образом:

Представление DOM для документа HTML

Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2020 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.

Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.

DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:

  • родительский узел (parent node) — родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.

На примере выше по отношению к узлам

и элемент является родительским. Для узла родительским является узел .

    узлы-потомки (child node) — узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу

и являются потомками. Для узла потомками являются и атрибут meta.
узлы-братья (sibling node) – узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются и по отношению к корневому , а также ,

и по отношению к родительскому узлу .


Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является . Он не имеет родителей и сам является родительским узлом по отношению к и .

В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.

Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:

  • — это элемент HTML;
  • href,class – атрибуты элемента ;
  • dataLayer.push() – это метод, который выполняется в ответ на событие onclick (возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).

Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.

Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.

Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути.

Селекторы могут быть:

  • простыми (напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.);
  • по атрибутам (позволяют искать элементы по их атрибутам attributes и значениям этих атрибутов. Делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута);
  • псевдоселекторами (те, что выбирают только часть элемента или только элементы в определенном контексте. Бывают двух типов — псевдоклассы и псевдоэлементы);
  • комбинированными (селекторы и их взаимосвязи между друг другом выражаются посредством комбинаторов);

Давайте рассмотрим каждый вид подробнее.

Простые селекторы

К ним относятся: селекторы классов (class selectors) и селекторы по ID.

Селектор класса состоит из точки (.), за которой следует имя класса. Имя класса — это любое значение, не содержащее пробелов в HTML-атрибуте class.

Пример селектора классов

Пример .form_button. Это означает, что css-селектор . >

Клик по элементам, соответствующим CSS-селектору класса .form_button

ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.

Пример селектора по ID

Пример #maiLeaderboard. Это означает, что css-селектор # >

Клик по элементам, соответствующим CSS-селектору c идентификатором #maiLeaderboard

Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.

Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока

Пример использования универсального селектора *

Настроить в GTM триггер на клик по элементу с классом «block», используя встроенную переменную Click >

По этой причине будем использовать универсальный селектор * для класса .block:

Клик по элементам, соответствующим CSS-селектору класса .block и всех узлов-потомков с помощью универсального селектора *

Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом «block».

В CSS есть такое понятие, как «комбинаторы». Они позволяют объединить множество селекторов, что дает возможность выбирать элементы внутри других элементов, или смежные элементы

Элемент

Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».

Клик по элементам, соответствующим CSS-селектору по div

Триггер в GTM будет активироваться при выполнении события по всем элементам div на странице.

Элемент, Элемент

Если необходимо выбрать все элементы “div” и p, то используйте конструкцию «элемент, элемент».

Клик по элементам, соответствующим CSS-селектору по div, p

Триггер в GTM будет активироваться при выполнении события по всем элементам div и p на странице.

Элемент Элемент

Если необходимо выбрать элемент, вложенный в другой элемент, то используйте конструкцию «элемент элемент».

Клик по элементам, соответствующим CSS-селектору div p

Триггер в GTM будет активироваться при выполнении события по всем элементам p на странице внутри элементов div.

Не обязательно должен быть «родительский узел» — «узел потомка», но необходимо, чтобы первый элемент был перед вторым.

Элемент>Элемент

Пример div>span. Конструкция «элемент>элемент» выбирает все дочерние элементы “span”, у которых родитель — элемент ”div”.

Разберем это на конкретном примере:

Пример конструкции «элемент>элемент»

Добавляем в Google Tag Manager условие активации триггера:

Клик по элементам, соответствующим CSS-селектору div>p

Триггер в GTM будет активироваться при выполнении события по дочерним элементам p на странице внутри элемента div, то есть тех, которые на скриншоте выше выделены зеленым цветом и соответствуют строке «Мороз и солнце; день чудесный!».

Элемент+Элемент


Пример div+a. Конструкция «элемент+элемент» позволяет выбрать все элементы , которые расположены сразу после закрывающегося тега

Конструкция «элемент+элемент» на примере div+a

Таким образом, если мы зададим условие активации триггера в GTM по Click Element и соответствию селектору CSS div+a, то тег будет активироваться по событию на странице по тегу , который идет сразу после закрывающегося тега ”div” (выделено зеленым), игнорируя другие теги внутри “div” (выделены красным).

Клик по элементам, соответствующим CSS-селектору div+a

ol. Конструкция «элемент

элемент» позволяет выбрать все элементы ol, которым предшествует элемент “p”.

Селекторы по атрибутам

У элементов HTML есть атрибуты — это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом. Справочная информация по HTML атрибутам доступна по ссылке: https://developer.mozilla.org/ru/docs/Web/HTML/Attributes

Существует особый вид селекторов, позволяющий искать элементы по их атрибутам и значениям. Для их записи используются квадратные скобки [].

Селекторы наличия и значения атрибута

Эти селекторы выделяют элементы на основе точного значения атрибута:

  • [атрибут] — выбирает все элементы с атрибутом ”атрибут”, вне зависимости от его значения;

Пример [target] — выбирает все элементы на странице с атрибутом target.

Примечание: по умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега .

  • [атрибут=”значение”] — выбирает все элементы с атрибутом “атрибут”, которое имеет значение “значение”.

Пример [target=_blank] – выбирает все элементы с атрибутом target, который имеет значение “_blank.

=”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается «значение» в виде отдельного слова. Если говорить простыми словами, то является аналогом условия «содержит».

Пример использования [атрибут

) в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению.

Селекторы подстроки в значении атрибута

Селекторы по атрибутам этого типа еще называют «Селекторы типа регулярных выражений (RegExp-like selectors)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных выражениях и примерах их использования написано в моей другой книге «Google Analytics для googлят: Практическое руководство по веб-аналитике (2020)».

Селекторы типа регулярных выражений:

  • [атрибут|=”значение”] — выбирает все элементы с атрибутом “атрибут”, имеющие значение в точности равное “значение” или начинающееся с “значение-“ (обратите внимание, что символ | — это не ошибка, он нужен для работы с языковой кодировкой.)

Значение может быть единственным словом в атрибуте, например, lang=»ru» или с добавлением других слов через дефис, например, lang=»ru-region».

На примере ниже для “lang|=ru” задается стиль (color:green). Результатом будет измененный цвет текста у атрибута “ru” Привет! и “ru-region” Здравствуйте. (выделено зеленым), поскольку [атрибут|=”значение”] подразумевает «точное» значение или же «начинающееся с».

Пример использования [атрибут|=”значение”]

  • [атрибут^=”значение”] — выбирает каждый элемент с атрибутом “атрибут”, значение которого начинается с “значение”.
  • [атрибут$=”значение”] — выбирает все элементы с атрибутом “атрибут”, значение которого заканчивается на “значение”.

Пример использования [атрибут$=”значение”]

  • [атрибут*=”значение”] — выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «значение».

Проиллюстрируем это на следующем примере:

Пример использования [атрибут*=”значение”]

Псевдоклассы

Псевдоклассы — это дополнения к обычным селекторам, которые делают их еще точнее и мощнее. Они определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. Это реализуется с помощью псевдокласса :hover.

Псевдокласс добавляется к селектору c помощью символа двоеточия : (селектор:псевдокласс).

В Google Tag Manager псевдоклассы также можно применять для активации переключателей элементов интерфейса, например, checkbox и флажки (radio), или для отслеживания кликов по определенным элементам из выпадающего списка.

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

  • :checked, :selected, :disabled, :enabled — различные состояния элементов input;
  • :nth-child(n) — позволяет отследить определенный элемент списка. Например, “ul>li:nth-child(4)” позволяет отследить четвертый элемент;
  • :nth-last-child(n) — псевдокласс, противоположный предыдущему, который позволяет отследить определенный элемент списка, отчет элементов идет с конца. Например, селектор CSS “:nth-last-child(2)” вернет предпоследний элемент списка;
  • :not(селектор) — псевдокласс отрицания. Выбирает все элементы, кроме того элемента, что в скобках.

Таблица псевдоклассов с примерам

Псевдоэлементы

Помимо псевдоклассов, существуют еще и псевдоэлементы. Псевдоэлемент — это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Они используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.

Таблица псевдоэлементов с примерами

Рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания данной темы:

CSS-селекторы: w3schools.com/cssref/css_selectors.asp

Демонстрация селекторов: w3schools.com/cssref/trysel.asp

По первой ссылке представлены все CSS-селекторы и псевдоклассы с примерами и описанием их работы (на английском языке). По второй вы можете наглядно увидеть, как работают различные селекторы.


Демонстрация селекторов на сайте w3schools.com

Выбрав в левой части экрана один из селекторов, справа вы увидите подсвеченный результат.

Также для закрепления пройденного материала рекомендую прочитать статью «Основы CSS-селекторов на примере котиков» и несколько разделов из справки разработчиков developer.mozilla.org.

Для того, чтобы правильно обращаться к элементам на странице и применять их в Google Tag Manager для отслеживания определенных событий, нужно просто глубже разобраться в теме CSS-селекторов, понять их взаимосвязь друг с другом и использовать инструменты, которые упрощают их обнаружение.

Разберем три варианта определения CSS-селекторов.

Консоль разработчика

Традиционный способ, с помощью консоли разработчика любого браузера. Я пользуюсь Google Chrome, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».

Правой кнопкой мыши – Просмотреть код

После того, как мы удостоверились, что выбрали нужный элемент, в открывшемся коде страницы еще раз нажимаем правой кнопкой мыши по нужному элементу. Далее «Copy» — «Copy selector».

Правой кнопкой мыши – Copy – Copy selector

В буфер обмена у вас скопировался селектор. Можно вставить его в любой текстовый документ и посмотрть как он будет выглядеть. В моем примере он выглядит так: #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

Получилась очень длинная цепочка взаимосвязей элементов друг с другом. Несмотря на это его можно использовать в Google Tag Manager для настройки отслеживания события. Однако тот же селектор можно записать и в таком виде: a.button.hp-button-1.slide-button.w-button.green.fancybox, просто убрав общую часть в начале.

CSS Selector Tester

Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

Расширение для браузера CSS Selector Tester

После установки в правом верхнем углу у вас должен отобразиться новый значок. Перейдите на необходимую страницу где хотите найти селектор и нажмите на иконку:

Иконка CSS Selector Tester

У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

Поиск селектора на странице

CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

Элементы div на странице

Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

SelectorGadget

Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».

Он позволяет легко определять селекторы CSS (при наведении на элемент в отдельном поле показывает его значение) и для наглядности выделяет выбранный элемент зеленым, а схожие – желтым.

Пример работы расширения SelectorGadget

Скачать расширение SelectorGadget можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.

Понравилась статья? Подписывайтесь на социальные сети:

Я также оказываю помощь в настройке контекстной рекламы и веб-аналитики. Подробнее здесь.

Как и зачем использовать пользовательские data-атрибуты в HTML5?

Дата публикации: 2020-04-12

От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе.

Почему именно пользовательские data-атрибуты?

Очень часто нам приходится хранить информацию, связанную с различными DOM-элементами. Для пользователей эта информация может быть несущественной, однако простой доступ к ней сильно упростит жизнь для нас с вами, разработчиков.

Например, у вас на странице показан список ресторанов. До HTML5 для хранения информации о еде в ресторане, а также о расстоянии до него от посетителя вы могли воспользоваться атрибутом class. А что если вам также нужно хранить id ресторана, чтобы знать, в какой конкретный ресторан пользователь собирается пойти?

С подходом на HTML-классах связано несколько проблем:

атрибут class не предназначен для хранения такой информации, его основная задача – позволять разработчику назначать стили на набор элементов;

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;

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

Чтобы избавиться от этих проблем, в HTML5 были представлены пользовательские data-атрибуты. Все атрибуты на элементе, начинающиеся на data- являются data-атрибутами. С их помощью также можно стилизовать элементы.

Теперь давайте изучим основы data-атрибутов и узнаем, как получить их значения в CSS и JS.

Синтаксис HTML

Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:

Теперь эти data-атрибуты можно использовать для поиска и сортировки ресторанов для посетителей. Например, можно отобразить только вегетарианские рестораны в определенном радиусе.

Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчеркивание (_). Заглавных букв в имени быть не должно.

При использовании data-атрибутов необходимо помнить о двух вещах.

Первое, тип хранимых в атрибуте данных должен быть string (строка). Также в data-атрибуте могут храниться любые данные, которые можно перекодировать в строку. Преобразования типов должны выполняться в JS.

Второе, data-атрибуты необходимо использовать только в крайнем случае, если ни один другой HTML-элемент или атрибут не подходит. Например, нельзя хранить класс элемента в атрибуте data-class.

У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.

Data-атрибуты и CSS

Data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов. Также с помощью функции attr() можно показывать пользователям информацию из data-атрибутов (с помощью тултипа, например).

Стилизация элементов

Возвращаемся к нашему примеру с ресторанами. Вы можете дать подсказку пользователям о типе ресторана или расстоянии до него с помощью селекторов атрибутов. С их помощью можно задать разные фоны ресторанам, пример:


Селекторы. Часть 3.

В этой объемной статье учебника мы с Вами продолжим изучение селекторов, рассмотрим с Вами примеры работы селекторов, предназначенных для выбора элементов с определёнными HTML атрибутами, познакомися с псевдоклассом отрицания и рассмотрим некоторые новые для Вас, и очень полезные псевдоклассы, которые позволят нам выбирать элементы в зависимости от их расположения в документе.

Селекторы атрибутов

Исходя из названия заголовка, вы можете догадаться, что благодаря использованию селекторов атрибутов вы можете выбрать те элементы страницы, которые имеют определённые HTML атрибуты.

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:

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

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Рассмотрим следующий пример в котором, мы выберем все элементы , у которых присутствует атрибут alt , который задает альтернативный текст для изображения.

Результат нашего примера:

Рис. 17г Пример использования селектора атрибутов.

С помощью селектора атрибутов мы можем выбрать элементы не только с определённым атрибутом, но и указать с каким значением должен быть этот атрибут.

Давайте рассмотрим пример в котором нам необходимо по особенному стилизовать поле, предназначенное для ввода пароля.

В этом примере мы использовали два селектора атрибутов с указанным значением, которые позволили нам выбрать поле, предназаченное для ввода пароля, а во втором случае с использованием псевдокласса :focus мы создали стили для того состояния, когда это поле находится в фокусе (пользователь кликнул на него, или выбрал с помощью клавиатуры). Псевдокласс :focus мы уже с Вами рассматривали в конце предыдущей статьи учебника «Псевдоклассы и псевдоэлементы».

Результат нашего примера:

Рис. 17д Пример использования селектора атрибута с указанным значением.

В предыдущем примере для выборки мы указали конкретное значение атрибута, но в некоторых случаях нам необходимо выбрать элементы, значение атрибута которых, начинается с определённых символов. В CSS 3 для этих целей введен специальный селектор атрибута, который выбирает элементы у которых определённый атрибут имеет значение, начинающееся с определённых символов. Этот селектор атрибута имеет следующий синтаксис:

Давайте рассмотрим пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https://:

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.

Результат нашего примера:

Рис. 17е Пример использования селектора атрибута со значением, начинающимся с определённых символов.

В CSS 3 был введен не только селектор атрибутов, который позволяет выбирать элементы, чьи атрибуты начинаются с определённых символов, но и элементы, чьи атрибуты заканчиваются определёнными символами.

Давайте рассмотрим пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла.

Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как разрешение файла.

Результат нашего примера:

Рис. 18 Пример использования селектора атрибутов со значением, заканчивающимся определёнными символами.

Давайте рассмотрим с Вами какие еще выборки можно сделать с использованием селектора атрибутов и перейдем к изучению такого полезного инструмента как псевдокласс отрицания.

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

Следущий селектор позволяет выбрать элемент, значение атрибута которого содержит определённое слово (не зависимо от позиции):

Ну и заключительный селектор атрибута, который имеется в современном стандарте, позволяет выбрать элемент значение атрибута которого начинается с определенного слова:

Обратите внимание, что условие выборки будет соблюдено если атрибут содержит значение, которое содержит только указанное слово, или если после указанного слова сразу следует дефис (значение продолжается через дефис).

Псевдокласс отрицания :not()

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.

Что нельзя использовать с псевдоклассом :not():

  • Использовать в одном селекторе несколько псевдоклассов :not().
  • Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
  • Нельзя использовать с селекторами потомков (например, div ul a).
  • Использовать в групповых селекторах (комбинации из селекторов).

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:

Создадим селектор класса .photo и применим его к необходимым изображениям, чтобы они получили оранжевую границу.

Перед Вами стоит задача изменить стиль для всех изображений (предположим, что их сотни), но при этом у Вас ограниченное количество времени и необходимо сделать так, чтобы эти изменения затронули изображения с классом .photo. Для этого Вам необходимо создать селектор совместно с псевдоклассом отрицания:

Всё вместе и результат:

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:

Рис. 19 Пример использования псевдокласса отрицания :not() в CSS.

Селекторы дочерних элементов

Селектор дочерних элементов позволяет форматировать элементы, вложенные внутрь других элементов (выбирает все дочерние элементы внутри элемента родителя).

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента

, и является дочерним именно для него.

Рис. 20 Дочерние элементы в HTML документе.

Перед нами стоит задача стилизовать гиперссылку (элемент ), который выделен оранжевым цветом на изображении:

Рис. 20а Задача выбора элемента на странице.

, так как они оба являются его потомками. Селекторы потомков мы с Вами рассматривали в статье «Селекторы. Часть 2».

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

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние , вложенные в

(убрали декорирование текста у двух элементов).


Результат нашего примера:

Рис. 20б Пример использования селектора дочерних элементов.

Псевдоклассы дочерних элементов

Псевдокласс :first-child

Псевдокласс :first-child применяет стиль к элементу в том случае, если элемент является первым дочерним элементом своего родителя.

Рис. 21 Выборка с использованием псевдокласса дочерних элементов.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:

Рис. 21а Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы

Перейдем к примеру:

В этом примере с использованием псевдокласса :first-child мы стилизовали элементы

Результат нашего примера:

Рис. 22 Пример использования псевдокласса :first-child.

Псевдокласс :last-child

Псевдокласс :last-child применяет стиль к элементу в том случае, если элемент является последним дочерним элементом своего родителя.

Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:

Рис. 23 Пример выбора селектора дочерних элементов.

Если вы сходу сможете ответить почему ни один элемент

Рис. 23а Схема работы псевдокласса :last-child.

Еще раз поясню, если вы создадите селектор h2:last-child, то браузер не найдет этот элемент по той причине, что нет элементов

Перейдем к примеру:

Результат нашего примера:

Рис. 23б Пример использования псевдокласса :last-child.

Псевдокласс :nth-child

Стилизация по порядковому номеру

Ну что сказать, у нас остались неоконченные дела, которые касаются стилизации того самого неуловимого элемента

Псевдокласс :nth-child позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера). Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:

Рис. 24 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы являются вторыми дочерними элементами своих родителей, а элемент

Перейдем к примеру:

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы

Результат нашего примера:

Рис. 24а Пример использования псевдоэлемента :last-child.

Продвинутое использование псевдокласса :nth-child

Стилизация по ключевому слову

В качестве значения псевдокласса :nth-child может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова, которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

  • even (четные элементы)
  • odd (нечетные элементы)

Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента , который определяет строку таблицы:

В этом примере с использованием псевдокласса :nth-child мы стилизовали четные строки первой таблицы (элементы ) и нечетные во второй таблице.

Рис. 24б Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы ( ) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

Рис. 25 Пример cтилизации дочерних элементов по математической формуле.

Вопросы и задачи по теме


Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:
  • Составьте следующие HTML страницы:
    1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title: Практическое задание № 5.
    2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved» : Практическое задание № 6.
    3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы

) в соответствии с изображением: Практическое задание № 7.

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

CSS [атрибут | = значение] vs [атрибут * = значение] селекторы

Почему нам нужен CSS [attribute | = value] Selector вообще, когда CSS3 [атрибут * = значение] Селектор в основном выполняет то же самое, совместимость с браузером почти похожа? Есть ли что-то, что делает первый селектор CSS, а второй не способен? Это первый раз, когда можно встретить двух очень похожих селекторов и удивляться, почему первый из них существует в первую очередь.

[ attr | = значение ] Представляет элемент с именем атрибута attr. Его значение может быть точно «value» или может начинаться со «value», за которым следует «-» (U + 002D). Его можно использовать для совпадений подкодов языка.

[ attr * = значение ] Представляет элемент с именем атрибута attr и значение которого содержит по крайней мере одно вхождение строки «значение» в качестве подстроки.

[атр | = значение]

[атр * = значение]

В том же примере кода:

Рекомендации

Между этими двумя селекторами существует много различий

Селектор [attribute | = value] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.

Селектор [attribute * = value] соответствует каждому элементу, значение атрибута которого содержит указанное значение.

См. Пример, чтобы получить четкое представление об обоих селекторах.

Они совершенно разные:

Представляет элемент с именем атрибута attr. Его значение может быть точно «value» или может начинаться со «value», за которым следует «-» (U + 002D). Его можно использовать для совпадений подкодов языка.

Представляет элемент с именем атрибута attr и значение которого содержит по крайней мере одно вхождение строки «value» в качестве подстроки.

Первый селектор гарантирует, что значение атрибута начинается с представленного значения, второе — только для значения атрибута.

Это было бы полезно, если бы вам пришлось различать атрибуты, которые имели одну и ту же строку в разных позициях внутри одного и того же атрибута.

С течением времени CSS эволюционировал, и поскольку он развил потребность и хочет больше селекторов, а функции увеличились.

Селектор CSS [attribute | = value] был определен до CSS3 (последняя версия) и доступен в CSS 2.1. Как указано на странице, на которую вы ссылались:

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

Хотя это очень удобно в большинстве случаев, иногда существуют фреймворки, которые поставляются со структурированным css в from someString_somethingUseful_somethingElse для определения его класса.

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

Таким образом, в CSS3 мы увидели введение селектора [attribute * = value], который позволяет нам выбирать элементы, которые могут иметь эти ключевые слова в качестве подстроки в их определении (хотя и не обязательно спереди). См.

Селектор соответствует каждому элементу, значение атрибута которого содержит указанное значение.

Селекторы атрибутов

Селекторы атрибутов — это селекторы, которые позволяют применить стили к любым HTML-элементам имеющим определенный атрибут или определенное значение атрибута. Существует много способов их применения, но, несмотря на такую гибкость, на практике селекторы атрибутов довольно редко используются, так как есть более удобные селекторы. Хотя, с другой стороны, иногда они очень помогают.

Да, и как обычно говорю вам — не вздумайте все, что написано ниже, заучивать наизусть, если с головой дружите. :) Из этого урока вам надо запомнить одно — то, что написано в первом параграфе. В остальном надо просто разобраться и понять. Итак.

Синтаксис селекторов атрибутов

Для применения стилей к элементам с определенным атрибутом, необходимо в квадратных скобках, [ ] , указать данный атрибут.

Чтобы стили применились к элементам имеющим не просто определенный атрибут, а атрибут с конкретным значением — надо после атрибута написать знак равно (=) и это значение, которое можно взять в кавычки.

= (приблизительно равно), а затем написать необходимое значение.

Четвертый вариант предназначен для атрибутов, у которых значение может состоять из нескольких слов разделенных дефисом (допустим, то же class ). И он позволяет применить стили ко всем элементам, у которых первое слово в значении атрибутов — одинаковое. Например, > «block-left» и > «block-right» . Здесь одинаковая часть — block , поэтому ее и можно использовать в качестве значения.

Пятый способ подключает стили к элементам, у которых значения атрибутов начинаются с одинакового текста. Например, src= «images/bird.png» и src= «images/cat.jpg» . Здесь одинаковая часть images/ или images или image и т.д. Именно эта одинаковая часть и записывается в качестве значения.

Аналогичен пятому, но здесь выборка идет по части текста, которым наоборот заканчиваются значения атрибутов. Допустим, src= «image/bird.png» и src= «picture/dog.png» . Понятно, что здесь одинаковая часть .png .

Если необходимо выделить элементы, у которых значения атрибутов имеют одинаковую часть текста, причем неважно в каком месте значения, то используется данный способ. Например, href= «http://seodon.ru/css/» и href= «http://www.seodon.ru/html/» . Здесь одинаковая часть «seodon.ru» . Таким образом, допустим, можно выделить все ссылки ведущие на определенный сайт.

К сожалению, Internet Explorer 6.0 вообще не понимает селекторы атрибутов.

Пример использования селекторов атрибутов в CSS

Результат в браузере

Объединение селекторов атрибутов

Селекторы атрибутов можно объединять между собой или с другими селекторами (например, тегов), чтобы получить более узкие параметры выбора. При объединении селекторы пишутся сразу друг за другом, то есть между ними не должно быть пробелов. В этом случае стили применятся только к тем элементам, которые соотвествуют сразу всем указанным селекторам. Общий синтаксис следующий.

[селектор атрибутов1][селектор атрибутов2]

селектор[селектор атрибутов1][селектор атрибутов2]

Пример объединения селекторов атрибутов в CSS

Результат в браузере

Обратите внимание, что в этом примере первый селектор устанавливает рамку только для всех тегов , у которых есть атрибут alt . А вот второй селектор задает стили рамки уже не только для обычных картинок, но и вообще для всех элементов страницы имеющих атрибуты alt и title .

В данном задании вы можете использовать только селекторы тегов и атрибутов, а в ссылках только атрибут href .

  1. Сделайте так, чтобы любые абсолютные ссылки на вашей страничке выводились жирным шрифтом без подчеркивания. Для этого вам понадобятся свойства font-weight и text-decoration.
  2. Сделайте две относительные ссылки и по две абсолютные, ведущие на поисковики Яндекс и Google. Пусть ссылки ведущие на Яндекс будут красного цвета, на Google — зеленого, а остальные — синего. Используйте свойство color.

Селекторы css по атрибуту, имени

элемент[атрибут] — данный селектор будет выбирать элементы с заданным атрибутом , каким-бы он ни был. Даже можно придумать свой . Работает в ie8.

Пример: img[alt] < border: 1px solid blue; >— все картинки, которые имеют alt
Пример: а[href][title] < color: green; >— свойство применяется только к тем ссылкам, которые имеют два атрибута одновременно.
Пример: a[dr] < background-color: yellow; >ссылка — применяет свойство к вашему атрибуту.

элемент[атрибут=значение] — применяет заданный стиль к элементу с указанным атрибутом и значением . Работает по точному совпадению значения атрибута.

Пример: a[href=»http://blogprogram.ru/retro.php»] < font-weight: bold; >— только к ссылке с данным url адресом
Пример: a[target=»_blank»] < color: green; >— к ссылки с таким типом открытия
Пример: a[ > к ссылке с >
Пример: div[ ] < background-color: yellow; >— к div-у с классом = are
Пример: input[type=»text»] к input-у с типом = text
Пример: input[name=»er2″] по имени
Пример: input[value=»12″] по значению поля

Есть различные типы атрибута:
[att

=value] — Атрибуты селектора должны быть разделены пробелами — список слов
[att^=value] — Значение атрибута начинается с заданного значения (”value”).
[att$=value] — Значение атрибута заканчивается на “value”.
[att*=value] — Значение атрибута содержит указанное значение (”value”).

Илон Маск рекомендует:  Событие onscroll в HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL