В css: Css-селекторы • Про CSS

CSS-селекторы — CSS | MDN

Селектор определяет, к какому элементу применять то или иное CSS-правило.

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

Универсальный селектор

Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

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

Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class. =»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинатор запятая

Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и <div> и <span>.

Комбинатор потомков

Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>

.

Дочерние селекторы

Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.

Комбинатор всех соседних элементов

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который  находится непосредственно после элемента <ul>.

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

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus

соответствует полю ввода, которое получило фокус.

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

Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Спецификация	Статус	Комментарии
Selectors Level 4	Рабочий черновик	Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
Selectors Level 3	Рекомендация	Добавлен комбинатор ~ и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов.
CSS Level 2 (Revision 1)	Рекомендация	Добавлен комбинатор потомков > и комбинатор следующего соседа + . Добавлен универсальный (*)  комбинатор и селектор атрибутов.
CSS Level 1	Рекомендация	Первоначальное определение.

Каскадность в CSS — Основы современной вёрстки

В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.

Что такое каскадность? Представьте себе каскад водопадов.

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

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку тёмного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p>Какой-то очень интересный текст об интересной вещи. Очень интересно.</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.text-dark {
  color: #333333;
}

Попробуйте воспроизвести этот пример и вы увидите, что текст выводится тёмного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

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

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

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберём на примере. Возьмём параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зелёный цвет.

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

<p>Какого же цвета будет параграф?</p>

Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф всё равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору (#blue)
2. Селектор по классу (.red)
3. Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберём ещё один пример:

#intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

.important {
  color: purple;
  font-style: italic;
}

<p>Индейские племена Манахаттоу и Канарси. </p>

Этот текст будет наклонным, жирным и зелёным. И вот почему:

• Селектор по тегу p:
  • Добавит синий цвет
  • Добавит жирное начертание
• Селектор по классу .important:
  • Заменит синий цвет на пурпурный
  • Сделает текст курсивным
• Селектор по идентификатору #intro:
  • Заменит пурпурный цвет на зелёный

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

{
  color: green;
  font-weight: bold;
  font-style: italic;
}

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

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере.

.alert {
  color: gray;
}

.alert-error {
  color: red;
}
 

<p>Важное сообщение! Сообщение красного цвета</p>

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

<p>Важное сообщение! Сообщение красного цвета</p>

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

.alert-error {
  color: red;
}

.alert {
  color: gray;
}

<p>Важное сообщение! Сообщение серого цвета</p>

Дополнительное задание

Создайте файлы index.html и style.css на своём компьютере.

Внутри HTML расположите следующую запись:

<div>Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

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

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

yoksel/common-words: 🧐 Слова, часто используемые в CSS-классах

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

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

quote, blockquote — цитата

snippet — пример кода

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main, body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Разное

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон

Состояния

active, current — активный элемент, например, текущий пункт меню

visible — видимый элемент

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Примеры использования

Простой список

<ul>
  <li>Первое</li>
  <li>Второе</li>
  <li>Третье</li>
</ul>

Картинка пользователя (юзерпик)

<div>
  <img src="userpic.png" alt="Дормидонт Петрович">
  <a href="#">Дормидонт Петрович</a>
</div>

Галерея

<div>
  <ul>
    <li>
      <img src="flowers. jpg" alt="Цветём как в последний раз">
    </li>
    <li>
      <img src="trees.jpg" alt="Парк «Три сосны»">
    </li>
  </ul>
</div>

Навигация

<nav>
  <a>Главная</a>
  <a href="#">Второстепенная</a>
  <a href="#">Третья с конца</a>
  <a href="#">Предпоследняя</a>
  <a href="#">Совсем конец</a>
</nav>

<nav>
  <ul>
    <li>
      <a>Главная</a>
    </li>
    <li>
      <a href="#">Статьи</a>
    </li>
    <li>
      <a href="#">Фотогалерея</a>
    </li>
    <li>
      <a href="#">Контакты</a>
    </li>
  </ul>
</nav>

Виджет в боковой колонке

<div>
  <h5>Выращиваем желе</h5>

  <div>
    <p>Чтобы вырастить общительное дружелюбное желе,
    нам потребуется рулон поролона, два килограмма сахара,
    три яйца и пол чайной чашки ацетона. </p>

    <a href="#">Не читать дальше...</a>
  </div>
</div>

Блок новостей

<div>
    <h4>Вчерашние новости</h4>

    <ul>
        <!-- к классу элемента добавляем класс блока,
             чтобы создать новое пространство имён -->
        <li>
            <h5>Соревнования среди воблы по конькобежному спорту</h5>
            <div>
              <p>Победила команда килек из Петрозаводска</p>

              <a href="#">Читать дальше</a>
            </div>
        </li>

        <li>
            <h5>Учёные уточнили роль напильника в уходе за ногтями</h5>
            <div>
              <p>Британские учёные высоко оценили вклад
                напильника в отращивание полутораметровых ногтей.</p>

              <a href="#">Не читать дальше</a>
            </div>
        </li>
    </ul>
</div>

Статья или пост в блоге (простой вариант)

<article>
  <h4>Нащупываем чакры у пучка петрушки</h4>
  <time>32 мая, 10:87</time>

  <div>
    <img src="userpic. png" alt="Клешня Андреевна">
    <a href="#">Клешня Андреевна Долгорукая</a>
    <div>Наш эксперт по чакрам</div>
  </div>

  <div>
    Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
    Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
    коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
    вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
    к пучку петрушки. Ласково взгляните на него и как следует почешите
    за ухом, можно себе или коту. Перевяжите атласной ленточкой,
    непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
    одомашненный пучок петрушки, который будет весело бегать за вами
    по пятам и проращивать свои семена в ваших тапках.
  </div>
</article>

Статья или пост в блоге (сложный вариант)

<article>
  <header>
    <h4>
      <a href="#">Резиновые уточки как способ самопознания</a>
    </h4>

    <time>32 мая, 10:87</time>
  </header>

  <div>
    <img src="userpic. png" alt="Василиса Сергеевич">

    <a href="#">Василиса Сергеевич</a>
  </div>

  <div>
    Достаньте с чердака коробку с полусотней резиновых уточек,
    оставшихся после празднования нового года. Из уточек
    и горящих свечей выложите пентаграмму на полу комнаты.
    Сядьте посередине в позу лотоса, в каждую руку возьмите
    по немецко-бразильскому словарю, прокашляйтесь, наберите
    полную грудь воздуха и громко и уверенно,
    с полной самоотдачей скажите "Кря!"
  </div>

  <div>
    <h5>Метки</h5>

    <ul>
      <li>
        <a href="#">хоровод своими руками</a>
      </li>
      <li>
        <a href="#">фарфоровые тапки</a>
      </li>
      <li>
        <a href="#">гуталин в кулинарии</a>
      </li>
    </ul>
  </div>

  <div>
    <ul>
      <li>
        <a href="#">238 ответов</a>
      </li>
      <li>
        <a href="#">Написать в спортлото</a>
      </li>
      <li>
        <a href="#">Поделиться</a>
      </li>
    </ul>
  </div>
</article>

Новые логические свойства в CSS!.

Следующий шаг в эволюции CSS

Перевод «New CSS Logical Properties!» Элада Шехтера.

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

До недавнего времени переменные в Sass были лучшим способом поддержки сайтов с языками, текст которых пишется в разные стороны (RTL и LTR). Если вы хотите узнать больше, то почитайте мою статью «The Best Way to RTL Websites with Sass!»

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

Самое время начать!

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

Раньше так было правильно, и остаётся до сих пор, но подходят последние деньки классических физических свойств типа margin-left, padding-right, border-top и других.

Прежде чем начать использовать новые логические свойства, вам нужно перестать думать терминами право-лево, верх-низ, и заменить их на inline-start, inline-end и block-start, block-end.

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

Например, padding-inline-start задаст отступ с той стороны, где начинается контент на текущем языке:

• Английский: padding-inline-start = padding-left
• Арабский: padding-inline-start = padding-right
• Японский: padding-inline-start = padding-top

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

Возможно, вы всё ещё спрашиваете себя, а разве это не всегда так?!

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

Сайты на японском и некоторых других восточных языках идут справа налево, а не сверху вниз! Чтобы понять, каково это, представьте, что вы повернули экран на 90° вправо. Сайт приходится листать не по вертикали, а по горизонтали!

Пример блочных свойства:

• Английский и арабский: padding-block-start = padding-top
• Японский: padding-block-start = padding-right

margin, padding и border

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

Пример для английского:

• margin-block-start = margin-top
• margin-block-end = margin-bottom
• margin-inline-start = margin-left
• margin-inline-end = margin-right

padding

• padding-block-start = padding-top
• padding-block-end = padding-bottom
• padding-inline-start = padding-left
• padding-inline-end = padding-right

border

• border-block-start = border-top
• border-block-end = border-bottom
• border-inline-start = border-left
• border-inline-end = border-right

width и height заменяются на inline-size и block-size

Свойства height и width также должны соответствовать этой новой методологии. Как только мы свыкнемся с методологией строка-блок, станет легче разобраться с размерами. Для английского языка свойство width следует заменить на inline-size, а свойство height — на block-size.

Пример строчного и блочного размеров:
Для английского и арабского (LTR и RTL)

• width = inline-size
• height = block-size

В языках, идущих сверху вниз, например, японском, мы столкнёмся с противоположным:

• inline-size = height
• block-size = width

Для минимальных и максимальных свойств просто добавьте min или max в начале. К примеру:

• min-inline-size: 300px
• max-block-size: 100px

Позиционирование в CSS

Свойства, которые мы раньше использовали для позиционирования, top, bottom, left, right, превратились в новые свойства с префиксом inset: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end.

Для английского (LTR):

• top = inset-block-start
• bottom = inset-block-end
• left = inset-inline-start
• right = inset-inline-end

/* Старая техника */
.popup {
position: fixed;  
top: 0;
bottom: 0;
left: 0;
right: 0;
}/* Новая техника */
.popup {
position: fixed;
inset-block-start: 0;  /* top - для английского */
inset-block-end: 0;    /* bottom - для английского */
inset-inline-start: 0; /* left - для английского */
inset-inline-end: 0;   /* right - для английского */
}

Бросив беглый взгляд, вы можете задаться вопросом, какого чёрта я должен использовать такие сложные имена?! Но на то есть веская причина. Новые имена свойств можно комбинировать в шорткаты, подобно текущим padding, margin, border.

Пример:

.popup {
position: fixed;
inset: 0 0 0 0; /* top, right, bottom, left - для английского */
}

Обтекание в CSS

Обтекание довольно простое, есть всего два значения, inline-start и inline-end, которые заменяют собой left и right.

Для английского (LTR):

• float: left = float: inline-start
• float: right = float: inline-end

Text-align

Это свойство даже проще чем обтекание, значения left и right заменяются на start и end.

Для английского (LTR):

• text-align: left = text-align: start
• text-align: right = text-align: end

Ещё

Свойство resize используется в основном для <textarea>. Его значения изменятся с horizontal и vertical на inline и block.

Для английского (LTR):

• resize: horizontal = resize: inline
• resize: vertical = resize: block

У свойства background-position пока нет реализации ни в одном из браузеров, но если копнуть поглубже, то можно найти отсылки к background-position-inline и background-position-block на MDN. Ещё нет нормальной документации, но они работают над этим! 🙂

Прочее: уже сейчас можно предположить, что свойства типа transform-origin тоже будут обновлены, как и любые другие свойства, имеющие отношение к направлению.

Гриды и флексбоксы

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

Рабочий процесс с учётом логических свойств

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

После того, как мы рассмотрели все обновлённые логические свойства, вот вам ещё два, которые позволят определить выравнивание блочной оси (поток сайта) и выравнивание строчной оси (направление чтения текста).

Свойство writing-mode (блочная ось)

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

Примечание: на данный момент есть три основных значения для writing-mode. Их имена могут сбить с толку. Всё потому, что в них есть направление блочной оси плюс выравнивание текста (строчная ось). Это вгоняет в тоску, выравнивание текста тут явно избыточно и только вызывает путаницу.

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

Примеры

Значения:

• writing-mode: horizontal-tb — сверху вниз, как для английского (значение по умолчанию)
• writing-mode: vertical-rl; = справа налево, для японского.
• writing-mode: vertical-lr; = слева направо, для монгольского.

Моё личное мнение — в значениях нужно оставить только tb, rl, lr (часть для блочной оси), чтобы устранить потенциальную путаницу.

Пример для японского:

html {
writing-mode: vertical-rl;
}

Свойство

Определяет, откуда должен начинаться текст: слева направо или справа налево, но только в случае, если задано значение по умолчанию для свойства writing-mode. Если мы поменяем значение writing-mode на один из вертикальных режимов, то фактическое направление написания изменится с положения слева направо и будет идти сверху вниз. Или наоборот, при значении с rtl (справа налево), оно изменится на сверху вниз.

Пример направления для арабского:

html {
direction: rtl;
}

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

Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.

Демо (попробуйте поменять язык):

• Все свойства блочной модели margin, padding, border и новые свойства ширины и высоты (inline-size, block-size) уже работают во всех основных браузерах, кроме Edge.
• Новые значения для text-align также работают везде, кроме Edge.
• Свойства и значения для float, position, resize работают пока только в Firefox.

Со всеми этими новыми доработками мы столкнёмся с новыми для нас проблемами. Например, что если мы захотим записать все значения свойства в сокращённом виде: margin: 10px 20px 8px 5px? В таком случае мы не сможем предсказать, как это будет проинтерпретировано браузером. Если сайт построен на физических свойствах, то значения будут расшифрованы следующим образом: margin-top, margin-right, margin-bottom, margin-left. Но если сайт построен на новых логических свойствах, то значения будут расшифрованы так: margin-block-start, margin-inline-end, margin-block-end, margin-inline-start.

На сайтах, написанных под английский (или русский) язык, физические и логические свойства будут работать одинаково. Для сайтов на других языках значения сокращений, как в примере с margin, должны работать в соответствии со значением свойства direction или writing-mode.

Этот вопрос всё ещё открыт. Я внёс предложение, которое может решить эту проблему. Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!

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

Предложенное мною решение:

html {
flow-mode: physical; 
/* или */
flow-mode: logical;
}.box {
/* будет интерпретироваться согласно значению flow-mode */
margin: 10px 5px 6px 3px;
padding: 5px 10px 2px 7px;
}

Проблемы с адаптивным дизайном

Пока пытался создать рабочее демо, я попробовал использовать новое свойство максимальной ширины max-inline-size внутри медиавыражения, предполагая, что для языков «справа налево» / «слева направо» оно будет вести себя как max-width, а для языков вроде японского — как max-height. К сожалению, браузеры пока отказываются понимать это свойство внутри медиавыражений.

/* Не работает */
@media (max-inline-size: 1000px) {
.main-content {
background: red;
grid-template-columns: auto;
}
}

Изменения, которые нужно учесть

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

• line-height заменить на line-size
• border-width заменить на border-size

Но, похоже, пока не стоит этого ждать, по крайней мере в отношении border-width. Это свойство обновили буквально только что и в его названии по-прежнему присутствует width. Пример: border-block-start-width.

Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂

Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂

Больше постов по типографике

Другие мои посты о CSS

Кто я?

Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.

Читать меня можно тут: Твиттер, Facebook, LinkedIn.

Вы можете найти меня в группах на Facebook:

Viewport единицы в CSS

В этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.

Перевод CSS Viewport Units

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

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

Viewport единицы это vw, vh, vmin и vmax.

Единица vw представляет собой процентное измерение ширины корневого элемента. Один vw равен 1% ширины вьюпорта.

Тут у нас есть элемент с таким CSS:

.element {
    width: 50vw;
}

Когда ширина вьюпорта равна 500px, то 50vw будут высчитаны таким образом:

width = 500*50% = 250px

Единица vh представляет собой процентное измерение высоты корневого элемента. Один vh равен 1% высоты вьюпорта.

У нас есть элемент с таким CSS:

.element {
    height: 50vh;
}

Если высота вьюпорта равна 290px, то 70vh будет высчитано следующим образом:

height = 290*70% = 202px

Вот и всё! Теперь давайте взглянем на другие единицы.

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

Давайте посмотрим на пример ниже.

У нас есть мобильный телефон в лэндскейп режиме и у элемента на странице есть такая единица как vmin. В этом случае, значение будет высчитано по высоте вьюпорта, так как оно меньше ширины.

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}

Вот как она будет считаться:

Как вы уже могли предположить, результат будет считаться таким образом:

padding-top = (10% of height) = 10% * 164 = 16.4px 
padding-bottom = (10% of height) = 10% * 164 = 16.4px

Это прямая противоположность vmin. Значение считается основываясь на максимальной ширине и высоте.

Давайте посмотрим на пример:

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}

Результат бы был высчитан таким образом:

padding-top = (10% of width) = 10% * 350 = 35px
padding-bottom = (10% of width) = 10% * 350 = px

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

В следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.

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

.title {
    font-size: 5vw;
}

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

Обратите внимание, что шрифт стал очень мелким при мобильных размерах, это очень плохо в плане доступности и UX. Насколько я знаю, минимальный размер шрифта на мобильных устройствах не должен быть ниже 14px. А там у нас выходит уже ниже 10px.

Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS calc() спешит на помощь!

.title {
    font-size: calc(14px + 2vw);
}

У функции calc() будет основное значение и оно добавит к нему 2vw. Учитывая это, размер шрифта точно не будет слишком маленьким.

Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в 95px, что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

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

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

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Добавив height: 100vh, мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

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

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

Если высота хедера и футера фиксированны, то их можно совместить с помощью функции calc():

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}

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

Добавляя 100vh как высоту для body элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    flex-grow: 1;
}

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

Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.

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

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

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Обратите внимание, что вьюпорт единицы используются в grid-* свойствах. Они также используются для border, border-radius и других свойств. Всё это приведет к флюидному дизайну.

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

.laptop:after {
    content:"";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-radius: 0 0 1vw 1vw;
}

Видео пример

Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней. Давайте рассмотрим пример ниже:

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

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Давайте разберем всё по полочкам и поймём как это работает.

Добавляем width: 100vw

Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

Добавляем margin-left: -50vw

Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.

Добавляем left: 50%

И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.

Ещё один интересный пример, а именно использование вьюпорт единиц для спейсинга между элементами. Его можно использовать с таким значениями как margin, top, bottom и grid-gap. Применяя его, спейсинг будет основываться на ширине вьюпорта и его высоте, что может быть крайне полезным для создания динамических шаблонов.

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

.modal-body {
    top: 20vh;
}

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

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

Для примера, вот как выглядит CSS:

.page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 800px) {
    .page-header {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

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

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h3 {
    margin-bottom: 1.5vh;
}

Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!

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

Используя их в grid-gap, мы можем получить желаемый результат. Обратите внимание, что я применял функцию calc(). Суть использования calc() в том, чтобы у нас уже был базис для вертикального и горизонтального промежутков.

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);
}

Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

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

.page-header {
    padding: 10vmin 1rem;
}

Пример

Несколько лет назад я написал статью о вертикальных медиа запросах.

Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

Используя вертикальные медиа запросы мы можем проверять находится ли девайс пользователя в лэндскэйп режиме. Если так, то тогда не будет смысла иметь секцию, занимающую всю высоту вьюпорта, применяя height: 100vh.

Чтобы решить эту проблему, мы можем сделать следующее.

@media (min-height: 400px) {
    .section {
        height: 100vh;
    }
}

Или мы можем использовать orientation в медиа запросах:

@media (orientation: landscape) {
    .section {
        height: 100vh;
    }
}

Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.

Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

Пример

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

Довольно популярный подход с верхним бордером

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

Давайте сделаем изначальным значением бордера 3px. Как конвертировать это фиксированное значение в вьюпорт единицу? Вот как можно это посчитать:

vw = (Pixel Value / Viewport width) * 100

Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.

Для примера, вот как добавлен верхний бордер:

.header {
    border-top: 4px solid #8f7ebc;  
}

В моём случае ширина вьюпорта равна 1440.

vw = (4 / 1440) * 100 = 0.277

И вот такой CSS мы получим:

.header {
    border-top: 0.277vw solid #8f7ebc;  
}

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

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:

/**
1. Используем гибкое значение для flex, width и height свойств.
2. line-height используется для центровки текста вертикально.
3. Размер шрифта.
4. Расстояние между кругом и текстом
**/
.point:before {
    flex: 0 0 calc(24px + 4vw); /* [1] */
    width: calc(24px + 4vw); /* [1] */
    height: calc(24px + 4vw); /* [1] */
    line-height: calc(24px + 4vw); /* [2] */
    font-size: calc(14px + 1vw); /* [3] */
    margin-right: calc(10px + 0.5vw); /* [4] */
}

Пример

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

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

Пример

Есть распространенная проблема на мобильных устройствах, которая касается скролла, даже если используется 100vh. Проблема тут в том, что адресная строка находится во вьюхе. Луис Хобрегс написал статью об этом и показал простое и легкое её решение.

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

А теперь js:

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.

Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:

.element {
    width: 100vw;
}

На Windows, высчитанная ширина .element будет равна 100vw + 8.5px, где 8.5px это ширина вертикального скроллбара.

Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.

Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.

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

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

.title {
    font-size: calc(16px + .3vw);
}

Даже лучше, мы можем использовать CSS единицы em и rem, вместо px. Таким образом у нас будет больше контроля при изменении размера шрифта.

.title {
    font-size: calc(1rem + .3vw);
}

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

Я нашёл этот полезный конвертер из px в vw, который может помочь вам в вашем проекте.

У вас есть какие-нибудь полезные инструменты? Дайте мне знать.

Это всё. У вас есть какие-нибудь комментарии и предложения? Пишите автору на shadeed9.

Определение CSS селекторов | База знаний

В этой статье подробно разберем, как найти CSS селекторы, которые необходимы для сбора данных с сайта

Важно! Не переживайте, если ранее не были знакомы с html и CSS, здесь не потребуется специальных знаний в программировании 😉

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

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome). 

Откроется дополнительная панель браузера, где во вкладке Elements отобразится весь html код страницы, загруженный в данный момент. На скриншоте примера выделен тег, на который как раз был клик правой кнопкой мыши.

Следующий этап работы — определить тег, который нам нужен. Сделать это можно несколькими способами:

• кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
• переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;

• через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

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

Тег — это элемент, который может быть состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например <br> (перенос текста на новую строку). 

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь  style=»font-size: 200%; text-align: center;» является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег <strong></strong> ребенок и тега <h3></h3>, и тега <div></div>, а они соответственно его родители:

Правила обозначения CSS селекторов

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

Название тега — достаточно просто указать span, div, img, h3  в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h2, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обознаются не так, как все остальные. Пример:

Здесь селектор  class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

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

Другие атрибуты — все остальные атрибуты записываются по единому правило: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

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

Сначала пробуем ближайшего родителя, то есть тег <span>. Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги <strong>, которые находятся в теге <span>. Аналогично будет выглядеть и с родителей <h3>: h3 strong. 

Мы можем задать и более четкое условие, что нам нужно все теги <strong>, которые находятся непосредственно в теге <span>. Для этого используем символ >: span > strong. 

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h3.font-header span span strong.

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

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги <input>, в которых есть атрибут type=»submit» и они должны являться детьми тега <div>, в котором есть атрибут. В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг): 

<div class=»button»>
<input type=»submit»></input>
</div>

Тут же, через запятую, прописан еще один селектор: все теги <button> с атрибутом.

Проверка уникальности CSS селектора

Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным. 

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

Регулярные выражения в CSS-селекторах и GTM

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

Еще раз тезисно:

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

Чтобы узнать какой CSS-селектор у элемента, необходимо открыть панель разработчика (в Google Chrome клавиша F12) и:

1. переключиться на вкладку Elements;
2. нажать на кнопку инспекции элемента;
3. выбрать элемент, у которого хотим определить CSS-селектор;
4. после этого кликнуть правой кнопкой мыши на тот элемент, который подсветился на вкладке Elements;
5. выбрать Copy — Copy selector (6):

Определение CSS-селектора у элемента на странице

В результате мы получим значение CSS-селектора. Например, такого вида:

#home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

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

CSS Selector Tester

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

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

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

Клик по адресу — Отправка события в аналитику

Например, в Google Analytics, чтобы получить данные в таком виде:

События в Google Analytics

Чтобы мы делали в обычной ситуации? Определяли бы для каждого элемента свой CSS-селектор и настраивали бы триггер с конкретным условием, а потом еще и собственный тег для передачи данных в Яндекс.Метрику и Google Analytics. В результате у нас бы получилось много триггеров и много тегов. Нам это не подходит.

Если мы исследуем каждый из этих элементов, то найдем закономерность — все они имеют одинаковое начало атрибута id вида store-span-…

У всех элементов одинаковое начало store-span-

Далее отличается только цифра: 69, 86, 77, 78, 85 и т.д. Чтобы отследить клики по всем таким адресам, нам в GTM потребуется прописать всего лишь 1 условие для триггера, используя регулярные выражения, и создать 1 тег.=store-span]

Click Element — соответствует селектору CSS

Ну а далее, чтобы передать значение самого названия магазина, можно воспользовать встроенной переменной Click Text, которую нужно добавить в тег Universal Analytics с типом Событие в любое из 4 компонентов (Категория, Действие, Ярлык). Триггер активации — наш настроенный выше триггер Клик — Все элементы.

Настройка тега Universal Analytics

[attribute$=value] Заканчивается на $=

Противоположный вариант, когда атрибут заканчивается на value. Символ $ используется для обозначения окончания строки. Например, активировать триггер при нажатии на ссылки, которые заканчиваются на .jpg. Конструкция такая:

img[src$=jpg]

Click Element — соответствует селектору CSS

[attribute*=value] Подстановочный знак *=

Атрибут содержит подстроку value и может быть равен myvalue, value2020, myvalue2020 и т.д. То есть выбираются все элементы с attribute, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) value.

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

[title*=зыв]

В качестве условия активации триггера в Google Tag Manager можно задать аналогичную конструкцию: Некоторые клики — Click Element — соответствует селектору CSS — [title*=зыв]. Либо же воспользоваться другим триггером Клик — Только ссылки.

Click Element — соответствует селектору CSS

Существует еще два селектора атрибутов со спецсимволами: [attribute|=value] и [attribute~=value].

[attribute|=value] 

Атрибут равен value или начинается с value- (дефис следом!). Эта же конструкция подошла бы и для отслеживания кликов по адресам из предыдущего примера. Задав:

Мы бы получили тот же самый результат:

[id|=store-span]

Атрибут содержит содержит value, значением которого является набор слов, разделенных пробелами, одно из которых в точности равно value. То есть value должно идти как отдельное слово через пробел, иначе конструкция не будет работать. Например: [attribute~=value] верно для 2020 value и неверно для 2020value или 2020-value.

В качестве примера разберем набор товаров на сайте, у которых есть класс cat-good. У части мебели есть дополнительный класс sale, отделенный пробелом, а у некоторых моделей такого класса через пробел нет.

sale через пробел есть и нет

Задав конструкцию:

CSS Selector Tester выделит нам странице только те товары, которые содержат в себе класс со значением sale, разделенный пробелом.

Для последних двух селекторов по атрибутам условие активации триггера в GTM такое же — Некоторые клики — Click Element — соответствует селектору CSS — CSS-селектор.

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

селекторов CSS — CSS: каскадные таблицы стилей

Селекторы CSS определяют элементы, к которым применяется набор правил CSS.

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

Универсальный селектор

Выбирает все элементы. При желании он может быть ограничен определенным пространством имен или всеми пространствами имен.
Синтаксис: * нс | * * | *
Пример: * будет соответствовать всем элементам документа.

Селектор типа

Выбирает все элементы с заданным именем узла.
Синтаксис: имя элемента
Пример: input будет соответствовать любому элементу .

Селектор класса

Выбирает все элементы, которые имеют данный атрибут class .
Синтаксис: . имя класса
Пример: . = значение ] [ attr $ = значение ] [ attr * = значение ]
Пример: [autoplay] будет соответствовать всем элементам, имеющим autoplay атрибут установлен (на любое значение).

Список выбора

, — это метод группировки, он выбирает все совпадающие узлы.
Синтаксис: A , B
Пример: div, span будут соответствовать элементам и

.

Комбинатор потомков

Комбинатор (пробел) выбирает узлы, которые являются потомками первого элемента.
Синтаксис: A B
Пример: div span будет соответствовать всем элементам , которые находятся внутри элемента

.

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

Комбинатор > выбирает узлы, которые являются прямыми дочерними элементами первого элемента.
Синтаксис: A > B
Пример: ul> li будет соответствовать всем элементам

, которые вложены непосредственно в элемент

.

Общий родственный комбинатор

Комбинатор ~ выбирает братьев и сестер. Это означает, что второй элемент следует за первым (хотя и не обязательно сразу), и оба имеют одного и того же родителя.
Синтаксис: A ~ B
Пример: p ~ span будет соответствовать всем элементам , которые следуют за

, сразу или нет.

Комбинатор смежных братьев и сестер

Комбинатор + выбирает соседних братьев и сестер.Это означает, что второй элемент следует непосредственно за первым и оба имеют одного и того же родителя.
Синтаксис: A + B
Пример: h3 + p будет соответствовать всем элементам

, которые непосредственно следуют за

.

Комбинатор столбцов

Модель || Комбинатор выбирает узлы, принадлежащие столбцу.
Синтаксис: A || B
Пример: столбец || td будет соответствовать всем элементам , которые относятся к области действия .

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

Псевдо : позволяет выбирать элементы на основе информации о состоянии, которая не содержится в дереве документа.
Пример: a: visit будет соответствовать всем элементам , которые посетил пользователь.

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

Псевдо :: представляют объекты, которые не включены в HTML.
Пример: p :: first-line будет соответствовать первой строке всех элементов

.

См. Подробности в таблицах спецификации псевдоклассов и псевдоэлементов.

Использование символов +,> и ~ в селекторах CSS | Автор: Аникет Кудале

 
 
 
 Яблоко 
 
 
 
 
 Яблоко в день убережет доктора! 
 
 
 
 
 Банан 
 
 < p> Cherry 
 
 
 

 div.container p {
  font-size : 20 пикселей; 
} 

 div.container> p {
  border-bottom : 1 пиксель, пунктирный черный; 
} 

 div + p {
  background-color : желтый; 
} 

 div ~ p {
  background-color : желтый; 
} 

 p {
 background-color: yellow; 
} 

 h2 {
 выравнивание текста: центр; 
 цвет: красный; 
} h3 {
 выравнивание текста: по центру; 
 цвет: красный; 
} p {
 выравнивание текста: по центру; 
 цвет: красный; 
} 

 h2, h3, p {
 выравнивание текста: по центру; 
 цвет: красный; 
} 

 #dog {
 background-color: purple; 
} 

 li.roomy {
 margin: 2em; 
} 

 
 Дэвид Уолш 
 

 h3 [rel = "friend"] {
  цвет: фиолетовый;  
} 

 input [type = "checkbox"] {
  цвет: фиолетовый;  
} 

 a [href = "https://blog.bitsrc.io"] {
  цвет: фиолетовый;  
} 

 div h2 {
 цвет фона: фиолетовый; 
}