Css выборка: Универсальные селекторы - CSS

Содержание

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

Кратко
Пример
Как пишется
1. Комбинированные селекторы
2. «Лоботомированная сова»
Подсказки

Кратко

Скопировано

Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after.

Пример

Скопировано

Такое CSS-правило, объявленное в начале файла со стилями, установит размер шрифта для всех элементов на странице:

* {  font-size: 2rem;}
          * {
  font-size: 2rem;
}

Как пишется

Скопировано

Универсальный селектор очень удобен, если какие-то свойства нужно применить ко всем элементам на сайте.

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

* {  box-sizing: border-box;}
          * {
  box-sizing: border-box;
}

Учитывайте, что это CSS-правило не будет иметь влияния на псевдоэлементы. Алгоритм расчёта нужно будет менять точечно. Или дополнить селектор, упомянув в нём ::before и ::after:

*,::before,::after {  box-sizing: border-box;}
          *,
::before,
::after {
  box-sizing: border-box;
}

Комбинированные селекторы

Скопировано

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

Такое CSS-правило применит цвет текста ко всем элементам, вложенным в блок с классом .preview:

.preview * {  color: green;}
          .preview * {
  color: green;
}

Изменим селектор на вложенный, и цвет изменится у всех прямых потомков блока с классом .preview:

.preview > * {  color: green;}
          .preview > * {
  color: green;
}

«Лоботомированная сова»

Скопировано

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

* + * {  margin-bottom: 15em;}
          * + * {
  margin-bottom: 15em;
}

Такой приём в шутку называют «лоботомированная сова». Можно подробнее почитать о способах его использования в статье «Аксиоматический CSS и лоботомированные совы».

Подсказки

Скопировано

💡 Не стоит злоупотреблять универсальным селектором. Есть вероятность столкнуться с необходимостью постоянно переопределять заданные с его помощью свойства.

Оценка материала

Если вы нашли ошибку, отправьте нам пулреквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

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

ctrl + alt + ←

Следующий материал

→

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

ctrl + alt + →

Девять CSS-селекторов на заметку начинающему веб аналитику — Разработка на vc.

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

2512 просмотров

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

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

Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.

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

Например, приведенный ниже триггер сопоставит элемент, который был нажат, с CSS-селектором и сработает только в том случае, если выбранный элемент является прямым потомком элемента с идентификатором myDiv.

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

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

1. Общие селекторы

Следующие селекторы используются для точного определения элементов на основе их атрибутов или их позиции в DOM. Их можно комбинировать, размещая один за другим. Например, div[title=”someTitle”][data-gtm-event=”someEvent”] будет соответствовать любому элементу div, который имеет атрибуты title и data-gtm-event.

.someClass — соответствует элементу с классом “someClass”, например <div class=”someClass”>.

#someId — соответствует элементу с id “someId”, например <span id=”someId”>.
element — соответствует любому HTML-элементу с названием “element”. Например, “div” соответствует любому div элементу на странице, а “div#myId” будет соответствовать <div id=”myId”>.
element element — соответствует любому HTML-элементу, который является потомком предыдущего.Чтобы соответствие сработало, между элементами не обязательно должно соблюдаться отношение родитель-потомок — первый элемент просто должен предшествовать второму в том же дереве. Например, “span.myClass div#myId” соответствует любому div#myId, который является потомком span. =”mailto:”]
3. a[href*=”example.com”]
Этот селектор соответствует любой ссылке, у которой атрибут href содержит “example.com”. Таким образом, можно использовать его, чтобы отсеять (или включить) клики по внутренним ссылкам на сайте.

4. a[href$=”.pdf”]
Этот селектор соответствует любой ссылке, у которой атрибут href заканчивается на «.pdf». Вы можете просто заменить «.pdf» на любой тип файла, который хотите отслеживать.
5. div.someElement a
Общие селекторы уже рассмотрены выше, но есть очень важный момент, который хотелось бы отметить.
Когда вы работаете с триггером «Клик/Все элементы», рекомендую добавить проверку соответствия для каждого элемента, который вы хотите отслеживать:
Click Element соответствует CSS-селектору
a[href*=”example.com”], a[href*=”example.com”] *
Другими словами, после вашего селектора добавьте еще один, который соответствует любому его потомку. Иногда это необходимо, поскольку триггер Все элементы фиксирует непосредственно только тот элемент, по которому кликнули.

Но в виду вложенности структуры DOM, вы можете столкнуться с неожиданной штукой. Например, если у вас есть такая ссылка:
<a href=”mailto:[email protected]”> <span>[email protected]</span> </a>
Клик по ссылке фактически придется на <span/>, и обычный триггер клика по ссылке в данном случае не будет работать. Используя селектор a[href=”mailto:[email protected]”], a[href=”mailto:[email protected]”] *, вы захватываете как клики на ссылку, так и на любых ее потомков (включая <span/>).
6. form#myForm option: checked
Часто в формах присутствуют чекбоксы, радиокнопки, списки выбора. Вы можете использовать псевдо-селектор :checked, чтобы трекать такие элементы. Например, form#myForm option:checked ищет любой элемент <option>, выбранный в форме. Таким образом вы можете использовать этот селектор для идентификации выбранной опции в раскрывающихся списках и других элементах, где присутствует этот псевдо-класс.

7. a:not()
Псевдо-селектор :not срабатывает если условие, что элемент не содержит заданное значение, возвращает true. Например, селектор вроде a:not([href*=”example.com”]) будет трекать клики по любым ссылкам, которые не содержат “example.com” в href.
8. ol > li:first-child
Селектор: first-child соответствует первому дочернему элементу по отношении к заданному. Например, ol > li:first-child будет соответствовать первому элементу из списка
Другие похожие селекторы — :last-child (соответствует последнему дочернему элементу) и :nth-child(N) (соответствует Н-ному дочернему элементу, например :nth-child(3) будет соответствовать третьему дочернему элементу относительно родительского элемента).

9. a[data-gtm-event]
Квадратные скобки обозначают атрибуты. Если вы пропустите знак равенства (=), то можете просто проверить, имеет ли элемент данный атрибут. Например, селектор a[data-gtm-event] будет соответствовать любой ссылке с атрибутом data-gtm-event, независимо от значения этого атрибута.
10. body > div.site-container > div > div > main… ARGH
Десятый пункт — совет, а не селектор. Старайтесь избегать длинных и сложных цепочек селекторов. Чем длиннее цепочка, чем больше вы используете отсылок на прямые отношения родителей и потомков(>) — тем больше точек отказа вы добавляете в ваш селектор.
Все, что нужно, чтобы ваш селектор перестал работать — изменение всего лишь одного элемента в длинном пути DOM, который указывает на ваш элемент. Особенно если об этом не вкурсе ваши старательные фронтенд разработчики.

Старайтесь всегда находить наиболее общий селектор, но который все еще достаточно точно соответствует тому, который вы пытаетесь захватить.
Надеюсь кому-нибудь это пригодилось)
Если у вас есть полезные кейсы и селекторы, которые вас выручали, и которыми вы хотели бы поделиться — буду рада расширить ими этот список.
Функции: выборка | Next.js
Маршрутизатор приложений
…
Функции
fetch
Next. js расширяет собственный Web fetch() API, позволяя каждому запросу на сервере устанавливать свою собственную семантику постоянного кэширования.
В браузере параметр cache указывает, как запрос на выборку будет взаимодействовать с HTTP-кешем браузера . С этим расширением кэш указывает, как запрос на выборку
на стороне сервера будет взаимодействовать с постоянным HTTP-кешем платформы.
Вы можете вызывать fetch с async и await непосредственно в серверных компонентах.
асинхронная функция экспорта по умолчанию Page() { // Этот запрос следует кэшировать до тех пор, пока он не будет признан недействительным вручную. // Аналогично `getStaticProps`. // `force-cache` используется по умолчанию и может быть опущен. const staticData = await fetch(`https://...`, { cache: 'force-cache' }) // Этот запрос следует повторно получать при каждом запросе. // Аналогично `getServerSideProps`. const dynamicData = await fetch(`https://...`, { кеш: 'без хранения' }) // Этот запрос должен кэшироваться со временем жизни 10 секунд. // Аналогично `getStaticProps` с параметром `revalidate`. const revalidatedData = await fetch(`https://...`, { следующий: { перепроверить: 10 }, }) вернуть
...
}
Поскольку Next.js расширяет API-интерфейс Web fetch() , вы можете использовать любой из доступных собственных вариантов.
Кроме того, Next.js заполняет fetch как на клиенте, так и на сервере, поэтому вы можете использовать fetch как в серверном, так и в клиентском компонентах.
options.cache
Настройте взаимодействие запроса с HTTP-кэшем Next.js.
выборка(`https://...`, { кеш: 'принудительный кеш' | 'без хранения' })
принудительный кеш (по умолчанию) — Next.js ищет соответствующий запрос в своем HTTP-кэше.
Если совпадение есть и оно свежее, оно будет возвращено из кеша.
Если совпадение отсутствует или оно устарело, Next.js извлечет ресурс с удаленного сервера и обновит кеш загруженным ресурсом.
no-store — Next.js извлекает ресурс с удаленного сервера по каждому запросу, не заглядывая в кеш, и не будет обновлять кеш загруженным ресурсом.
Полезно знать :
Если вы не укажете параметр cache , Next.js по умолчанию будет использовать force-cache , если не используется динамическая функция, такая как cookies() , и в этом случае по умолчанию будет no-store .
Параметр no-cache ведет себя так же, как no-store в Next.js.
options.next.revalidate
fetch(`https://...`, { next: { revalidate: false | 0 | number } })
Установить время жизни кэша ресурса (в секундах).
false — Кэшировать ресурс на неопределенный срок. Семантически эквивалентен повторной проверке : Infinity . Кэш HTTP может со временем вытеснять старые ресурсы.
0 — Предотвратить кэширование ресурса.
номер — (в секундах) Укажите, что ресурс должен иметь время жизни кэша не более n секунд.
Полезно знать :
Если отдельный запрос fetch() устанавливает число повторной проверки меньше, чем значение по умолчанию повторной проверки маршрута, весь интервал повторной проверки маршрута будет уменьшен.
Если два запроса на выборку с одним и тем же URL-адресом на одном и том же маршруте имеют разные значения revalidate , будет использоваться меньшее значение.
Для удобства нет необходимости устанавливать кэш , если перепроверить установлено число, поскольку 0 подразумевает кэш : 'no-store' , а положительное значение подразумевает кэш : 'force-cache' .
Конфликтующие параметры, такие как {revalidate: 0, cache: 'force-cache'} или {revalidate: 10, cache: 'no-store'} , вызовут ошибку.
Версия Изменения
v13.0.0 выборка введена.
Было ли это полезно?
поддерживается.
Обратный прокси: неправильный порт, используемый для получения css/js — Help
Nephe (Гийом Этье) 27 декабря 2018 г., 18:51 1
Привет,
Я пытаюсь настроить Caddy в качестве обратного прокси-сервера для экземпляра Selfoss (агрегатора rss), обслуживаемого nginx.
Я использую следующий Caddyfile:
rss.domain.com { прокси / selfoss:8888 { прозрачный } }
Здесь selfoss:8888 относится к контейнеру selfoss, где nginx прослушивает порт 8888.
Когда я пытаюсь загрузить https://domain.com в своем браузере, я получаю индексный файл, но файлы css и javascript не загружаются: файлы запрашиваются по адресу rss.domain.com :8888 вместо rss.domain.com .
В индексной страницы, у меня .
В моей конфигурации чего-то не хватает, чтобы правильно передать, какой порт изначально использовался?
Я использую Caddy 11.1 из этого образа докера: https://hub.docker.com/r/abiosoft/caddy
Selfoss взят из этого образа докера: https://hub.docker.com/r/hardware/selfoss
исходниках Сельфосса я наконец понял, что надо ставить header_upstream X-Forwarded-Port правильно.
Работает следующий Caddyfile
rss.domain.com { прокси / selfoss:8888 { прозрачный header_upstream X-Forwarded-Port 443 } }
Однако теперь у меня есть два вопроса:
есть ли способ не хардкодить порт? Заполнитель {port} не представляет запрошенный порт.
есть ли причина, по которой header_upstream X-Forwarded-Port не должен быть включен в прозрачный ?
Спасибо,
Нефе
Вайтстрейк (Мэттью Фэй) 28 декабря 2018 г., 3:40 2
Нефе:
есть ли способ не хардкодить порт? Заполнитель {port} не представляет запрошенный порт.
Заполнитель {port} должен быть портом , который клиент Caddy использовал для подключения. Вы видите другое поведение?
Нефе:
есть ли причина, по которой header_upstream X-Forwarded-Port не должен быть включен в прозрачный ?
Насколько мне известно, единственная причина в том, что X-Forwarded-Port встречается довольно редко. Тем не менее, я не думаю, что было бы плохо добавить его в пресет прозрачного . Возможно, вы могли бы открыть вопрос в репозитории Caddy, чтобы его можно было обсудить? https://github.com/mholt/caddy/issues/new
Нефе (Гийом Этье) 28 декабря 2018 г., 4:01 3
Спасибо за ответ, Вайтстрейк.
Уайтстрейк:
есть ли способ не хардкодить порт? Заполнитель {port} не представляет запрошенный порт.
Заполнитель {port} должен быть портом , который клиент Caddy использовал для подключения. Вы видите другое поведение?
Когда я пытался, все было по-другому. Я ожидал 443 для https-соединения, но получил 58654.
Открою тему про пресет прозрачный .
Уайтстрейк (Мэттью Фэй) 28 декабря 2018 г. , 6:29 4
Хм… Он каждый раз меняется или постоянно порт 58654? Это может быть порт клиента , а не порт, через который клиент подключился к Caddy. Это имело бы смысл, исходя из формулировки, но это бесконечно менее полезно для нас, кто хочет знать порт сервера.
Доступна информация о порте сервера — она добавлена к заполнителю {host} (и специально исключена {hostonly} ) — но если {port} не так, то фактического заполнителя для его получения нет, и было бы полезно иметь один!
Когда вы открываете проблему с прозрачным пресетом , также упомяните об этом (и, возможно, дайте ссылку на эту ветку) — PR для этой проблемы может решить обе проблемы сразу (внедрите заполнитель и включите X-Forwarded-Port в прозрачной предустановке ).
Нефе (Гийом Этье) 28 декабря 2018 г.