В css что значит: Что в CSS означает знак «>»? — Хабр Q&A

Leave a Comment / Css / By /

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

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

2480 просмотров

Использование 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-элементу, который является потомком предыдущего.Чтобы соответствие сработало, между элементами не обязательно должно соблюдаться отношение родитель-потомок — первый элемент просто должен предшествовать второму в том же дереве.
    =”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, который указывает на ваш элемент. Особенно если об этом не вкурсе ваши старательные фронтенд разработчики.

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

    Надеюсь кому-нибудь это пригодилось)

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

    Как и когда использовать правило !important в CSS

    Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important.

    Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.

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

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

    Давайте представим, что таблица стилей содержит следующие стили:

    p { color: green; }
p { color: black; }

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

    В продолжении расскажем, как правило !important меняет приоритетность.

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

    p { 
color: green !important; 
}

    Для баланса декларация !important (символ-разделитель «!» и ключевое слово «important» находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important, но пользовательские правила !important переопределяют авторские правила !important. Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.

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

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

    Пример

    <!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      body { 
      background-color: #1c87c9 !important; 
      background-color: #ffcc00; 
      }     
      h3 { 
      color: #8ebf42 ; 
      } 
      h3 { 
      color: #eeeeee !important; 
      } 
    </style>
  </head>
  <body>
    <h3>W3docs</h3>
    <p>W3docs дает возможность бесплатно изучить материалы таких языков программирования, как HTML, CSS, Java Script, PHP и др.</p>
  </body>
</html>

    Попробуйте сами!

    В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important.

    При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !importantк вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.

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

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

    Использование правила !important может быть нормальным в следующих случаях:

    • Переопределение стилей в пользовательском таблице стилей

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

    • Переопределение исходного кода и встроенных стилей.

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

    • Utility Cases

    Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:

    Пример

    <!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .button {
      background: #1c87c9; 
      color: white;
      font-weight: bold;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid #666;
      text-decoration: none;
      }
    </style>
  </head>
  <body> 
    <a href="#">BUTTON</a>
  </body>
</html>

    Попробуйте сами!

    Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:

    Пример

    <!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #mybutton a {
      border-bottom: 3px dashed #8ebf42;
      }
      .button {
      background: #1c87c9; 
      color: white;
      font-weight: bold;
      padding: 5px;
      border-radius: 4px;
      border: 3px solid #666;
      text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section>
      <p>This is a 
        <a href="#">BUTTON</a>
      </p>
    </section>
  </body>
</html>

    Попробуйте сами!

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

    Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important.

    Пример

    <!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      #mybutton a {
      border-bottom: 3px dashed #8ebf42;
      }
      .button {
      background: #1c87c9 !important; 
      color: white !important;
      font-weight: bold !important;
      padding: 5px !important;
      border-radius: 4px !important;
      border: 3px solid #666 !important;
      text-decoration: none !important;
      }
    </style>
  </head>
  <body>
    <section>
      <p>This is a <a href="#">BUTTON</a>
      </p>
    </section>
  </body>
</html>

    Попробуйте сами!

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

    Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important.

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

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

    селекторов css. Что означает «*» в CSS?

    спросил

    Изменено 7 месяцев назад

    Просмотрено 77 тысяч раз

    Я просматривал файлы CSS для многих веб-сайтов, таких как Facebook и Youtube.

    Почти во всех них я вижу этот код:

     * {
маржа: 0;
заполнение: 0;
}

    Это странно, так как удаление этого блока в инструментах веб-разработчика Chrome не влияет на макет страницы.

    Что означает этот код, когда он используется и почему?

    • css
    • css-селекторы
    2

    Это распространенный метод, называемый сбросом CSS. Разные браузеры используют разные поля по умолчанию, в результате чего сайты выглядят по-разному. * означает «все элементы» (универсальный селектор), поэтому мы устанавливаем для всех элементов нулевые поля и нулевые отступы, чтобы они выглядели одинаково во всех браузерах.

    0

    Звездочка ( * ) является подстановочным знаком и означает все элементы.

     * {
    маржа: 0;
}

    устанавливает поля всех элементов равными 0.

    * является подстановочным знаком

    Это означает применение этих стилей ко всем элементам.

    В этом случае для поля и заполнения для всех элементов установлено значение 0 . Это характерно для файлов Reset CSS, чтобы по умолчанию для всех собственных полей/отступов браузера для разных элементов было установлено общее значение.

    Сбрасывает поля и отступы всех HTML-элементов на странице до 0.

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

    Фактически, многие веб-сайты содержат файл reset.css (или аналогичный), при открытии которого вы заметите множество правил для сброса всего в каждом браузере.

    2

    Это подстановочный знак, который устанавливает margin и padding на 0 для всех элементов HTML.

    Попробуйте более интересный вариант, например:

     * {
    размер шрифта: 20pt;
}
    0

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

    ,

  • ,

    ,

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

    * — подстановочный знак, выбирает все элементы поле: 0; и заполнение: 0; задайте для полей и отступов значение 0 для выбранных элементов, в данном случае это будут все элементы.

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

    1

    Это обычная часть общего сброса CSS. Это в основном устанавливает для всех полей и отступов всех (*) элементов значение 0. Затем вы можете добавлять свои собственные значения полей и отступов для каждого элемента в соответствии с вашими требованиями.

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

     div * {
// код здесь
}

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но никогда не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

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

    Что такое CSS? (определение по сравнению с HTML, адаптивный CSS)

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

    Является ли CSS языком программирования?

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

    Подробнее о встроенных инструментах InCan Low-Code Прекратить нехватку разработчиков?

     

    HTML и CSS: в чем разница?

    Хотя HTML и CSS тесно связаны, CSS определяет стиль, тогда как HTML определяет содержание и структуру.

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

    Произошла ошибка.

    Невозможно выполнить JavaScript. Попробуйте посмотреть это видео на сайте www.youtube.com или включите JavaScript, если он отключен в вашем браузере.

    CSS за 100 секунд. | Видео: Fireship

     

    Что означает адаптивность в CSS?

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

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

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

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *