Сложные css селекторы: Комплексные селекторы | WebReference

30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

* {
 margin: 0;
 padding: 0;
}

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

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

Также символ * можно использовать для дочерних элементов объекта.

#container * {
 border: 1px solid black;
}

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

Селекторы

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

.error {
  color: red;
}

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

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

li a {
  text-decoration: none;
}

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

a {color: red;}
ul {margin-left: 0px;}

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

#container > ul {
  border: 1px solid black;
}

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

<div>
      <ul>
         <li>Элемент списка
           <ul>
              <li>Потомок</li>
           </ul>
         </li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
      </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

9. X ~ Y

ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]

a[title] {
   color: green;
}

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]

a[href="http://www.codeharmony.ru"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]

a[href*="codeharmony"] {
  color: red;
}

Поехали дальше; это как раз то, что нам нужно. (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]

a[href$=".jpg"] {
   color: red;
}

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]

a[data-filetype="image"] {
   color: red;
}

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>

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

a[data-filetype="image"] {
   color: red;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

16. X[foo~=»bar»]

a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:

/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

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

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

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

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

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

a:hover {
 border-bottom: 1px solid black;
}

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)

div:not(#container) {
   color: blue;
}

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

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

*:not(p) {
  color: green;
}

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Выбираем первую букву параграфа:

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

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

Выбираем первую строку параграфа:

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

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

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

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

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child

ul li:first-child {
   border-top: none;
}

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

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

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

Совместимость:

* IE7+
* Firefox
* Chrome * Safari
* Opera

27. X:last-child

ul > li:last-child {
   color: green;
}

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

28. X:only-child

div p:only-child {
   color: red;
}

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

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

Давайте рассмотрим для наглядности такую разметку:

<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>

В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.

ul > li:only-of-type {
   font-weight: bold;
}

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

30. X:first-of-type

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

Чтобы лучше это понять, скопируйте в свой редактор следующий код:

<div>
   <p>Здесь параграф.</p>
   <ul>
      <li>Элемент 1.</li>
      <li>Элемент 2.</li>
   </ul>

   <ul>
      <li>Элемент 3.</li>
      <li>Элемент 4.</li>
   </ul>
</div>

Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

Данный код гласит: «Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li.»

Решение 2

Другой вариант — воспользоваться смежным селектором:

p + ul li:last-child {
   font-weight: bold;
}

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

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

Вывод

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

Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.

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

По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.

P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

CSS некоторые сложные селекторы — Русские Блоги

1. Сложный селектор
1. Селектор Brother
Функция: сопоставлять другие элементы через взаимосвязь уровней элементов. Может искать только назад, но не вперед поисковый элемент
Категория:
1. Селектор смежных братьев и сестер: сопоставление соседних братьев и сестер указанного элемента, обобщение относится к селектору, находящемуся непосредственно за указанным элементом.
Синтаксис: селектор 1 + селектор 2

	2. Универсальный родственный селектор: используется для сопоставления всех родственных элементов за элементом.
	    Синтаксис: селектор 1 ~ селектор 2
 2. Селектор атрибутов
       Роль: позволяет использовать атрибуты, прикрепленные к элементу, и его значение, чтобы соответствовать элементам на странице.
       Синтаксис: единственный набор вариантов, представленный []
   	    1. [attr]: сопоставить элементы с атрибутом attr
	 2. Elem [attr]: сопоставьте элемент elem с атрибутом attr.
	 3. Elem [attr1] [attr2]: сопоставьте все элементы elem с атрибутами attr1 и attr2 на соответствующей странице.  = value]: сопоставить elem с атрибутом attr, и значение атрибута начинается со значения
	 7, elem [attr $ = value]: сопоставить elem с атрибутом attr, и значение атрибута заканчивается значением
	 8. elem [attr * = value]: сопоставьте элемент elem с атрибутом attr, просто включите символ значения
 3. Селектор псевдокласса
	 1. Целевой псевдокласс
	    Функция: выделите активный элемент привязки html и сопоставьте активный элемент привязки html на текущей странице
	    Синтаксис:: target
	 2. Псевдокласс состояния элемента (в основном отражается в выбранном / невыделенном состоянии - в основном используется в элементах формы)
		 1, включен: соответствует каждому включенному элементу
		 2. Отключено: сопоставьте все отключенные элементы.
		 3. Установлено: соответствие каждому выбранному элементу ввода (переключатель / кнопка проверки).
	 3. Структурные псевдоклассы (курсив)
		 1.: first-child соответствует первому дочернему элементу, принадлежащему его родительскому элементу
		 2.:last-child соответствует последнему дочернему элементу, принадлежащему его родительскому элементу
		 3. :nth-child соответствует n-му дочернему элементу, принадлежащему родительскому элементу
		 4.: empty соответствует каждому элементу, у которого нет дочерних элементов (включая текст) <div> </div>
		 5.:only-child соответствует единственному дочернему элементу, принадлежащему родительскому элементу
	 4. Отрицательные псевдоклассы.
		 Синтаксис:: not (селектор)
		 Роль: исключить элементы, удовлетворяющие селектору, из указанного диапазона
 4. Селектор псевдоэлементов.
	 Разница: псевдокласс: соответствующий элемент
	       Псевдоэлемент: содержимое совпадающего элемента
	 Синтаксис:
	       1.: first-letter / :: first-letter соответствует первому символу указанного элемента
	       2.: first-line / :: first-line соответствует первой строке указанного элемента
	       3.::selection указывает выбранную часть элемента
	       4.: before / :: before перед соответствующей областью содержимого элемента
	       5.: after / :: after после соответствующей области содержимого элемента
 5.  Разница между: и ::
           Стандарт w3c определяет использование всех селекторов псевдоклассов в спецификации css3: start, все селекторы псевдоэлементов используют :: start, но для css2 такой спецификации нет, поэтому в браузерах IE8 и ниже он не поддерживается :: writing, Поэтому лучше всего использовать:

Интеллектуальная рекомендация

Решите java.err.nojdk при доступе к JSP на странице Jetty

При попытке использовать архетип jetty7 + cometd + spring для создания проекта сегодня, обычные результаты доступа, ожидаемые по ссылке, не могли появиться, и появилось org.apache.jasper.JasperExcepti…

Уточнить взаимосвязь между сервлетом, Tomcat, веб -сервером, интерпретацией отношений между содержанием сервиса

Уточнить взаимосвязь между сервлетом, Tomcat, веб -сервером 1. Что такое веб -сервер? В: Как мы можем получить доступ к ресурсу, отображаемому с помощью картирования веб -сервера? Во -вторых, что тако…

Простое руководство по созданию надстроек для пошаговых мобильных игр на Python (часть 2)

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

Создайте среду выполнения на основе среды Express.

Во-первых, установить экспресс-генератор глобально npm install -g express-generator // Установите генератор экспресс-генератора, вы можете быстро создавать экспресс-проекты, команду express * нельзя и…

1039 Покупать или нет (на основе Python)

Хахаха, директор внезапно хочет приехать посмотреть наш VR-проект, и я с радостью добавлю еще один вопрос. Код этого вопроса не очень похож на Python, я чувствую, что его можно оптимизировать, хе-хе Я…

Вам также может понравиться

Как писать файлы кеша

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

IOS XIB изменить кадр

// Динамические изменения рамы // Casonry Изменить кадр…

Советы Swagger-ui не могут выводить базовый URL.

Unable to infer base url. This is common when using dynamic servlet registration or when the API is behind an API Gateway. The base url is the root of where all the swagger resources are served. For e…

Анализ самого всеобъемлющего и основательного принципа BFC в истории

В этой статье рассказывается о том, что такое концепция BFC: правила ограничения BFC, как мы можем инициировать генерацию нового BFC; применение BFC в макете: предотвращение перекрытия полей (коллапс,…

Python-отформатированный выход

…

© 2020-2022 All rights reserved by russianblogs.com

CSS селекторы атрибутов, псевдоклассы

Главная > Учебник CSS >

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

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

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

Стиль:

+

[rel]
  {
  color: Red;
  }

HTML код:

<a href="www.yandex.ru" rel="answer">Ссылка</a>

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

Стиль:

li[value]
  {
  color: Blue;
  }

HTML код:

<ol>
<li value="5">Пункт списка</li>
</ol>

Можно установить стиль по атрибуту не только для тэгов, но и для других селекторов.

В CSS селекторы атрибутов можно указать с конкрентым значением атрибута. Пример:

Стиль:

input[type="button"]
  {
  width: 150px;
  height: 40px;
  }

HTML код:

<input type="button" value="Кнопка">

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

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

link — непосещённая ссылка

visited — посещённая ссылка

active — активный элемент, то есть элемент, на котором нажата кнопка мыши. Элемент является активным, только пока кнопка нажата

focus — элемент находится в фокусе. Используется для элементов формы

hover — указатель мыши находится над элементом

lang(язык) — элемент с атрибутом lang, имеющим значение, указанное в скобках

first-of-type — первый элемент родительского элемента

last-of-type — последний элемент родительского элемента

only-of-type — единственный элемент родительского элемента

nth-of-type(n) — элемент, который идёт n по счёту родительского элемента

nth-last-of-type(n) — элемент, который идёт n по счёту родительского элемента, считая от последнего элемента

root — корневой элемент документа

empty — пустой элемент

enabled — включенный элемент формы

disabled — выключенный элемент формы

checked — выбранный элемент формы

not(селектор) — все элементы, кроме указанного

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

Стиль:

#div1 
  {
  color: Red;
  font-size: 32px;
  }
#div1:hover
  {
  font-size: 46px;
  color: Green;
  }

HTML код:

<div>Текст</div>

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

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

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

first-letter — первый символ элемента

first-line — первая строка элемента

Этим псевдоэлементам можно указать свойства, применяемые к тексту

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

Стиль:

#fstyle::first-letter
  {
  font-size: 40px;
  color: Green;
  }

HTML код:

<p>Текст с особенным стилем первой буквы</p>

Существует ещё два псевдоэлемента, которые работают совсем по-другому. Они добавляют контент элементу.

before — добавляет контент перед основным контентом

after — добавляет контент после основного контента

Этим псевдоэлементам указывается свойство content, в котором пишется добавляемый контент. При необходимости можно указать и другие свойства. Пример:

Стиль:

.co::before
  {
  content: "Ученик ";
  }

HTML код:

<p>Иванов</p>
<p>Петров</p>

Комбинаторы

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

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

Для примера решим задачу, которая иногда решается на практике. Есть блок, внутри него есть тэги <span>. Для тех тэгов <span>, которые непосредственно вложены в блок, нужно установить определённый стиль. А те тэги <span>, которые находятся внутри других вложенных тэгов, должны остаться неизменными. Задача лекго решается с помощю комбинатора >.

Стиль:

#st>span
  {
  color: Green;
  }

HTML код:

<div>Начало <span>Зелёный текст</span> Продолжение
<p><span>Текст без стиля</span></p>
</div>

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

CSS селекторы и модуль BeautifulSoup4 в Python.

Поиск по CSS селекторам (справочное руководство).

В модуле BeautifulSoup4 есть метод BeautifulSoup.select(), который использует SoupSieve, чтобы запустить CSS селектор и вернуть все подходящие элементы. =»value»].

Базовые CSS-селекторы.

Поиск по имени/названию HTML-тега.

Синтаксис:

• element

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
  <div>Here is some text.</div>
  <div>Here is some more text.</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('div')
# [<div>Here is some text.</div>, 
# <div>Here is some more text.</div>]

Поиск по индификатору HTML-тега.

Синтаксис:

• #id

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
   <div>Here is some text. </div>
   <div>Here is some more text.</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('#some-id')
# [<div>Here is some text.</div>]

Поиск по классу HTML-тега.

Синтаксис:

• .class

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
   <div>Here is some text.</div>
   <div>Here is some more text.</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('.some-class')
# [<div>Here is some text.</div>]

Поиск по атрибутам HTML-тега.

Ищет HTML-элементы с атрибутом attribute.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example. org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[href]')
# [<a href="#internal">Internal link</a>, 
# <a href="http://example.com">Example link</a>, 
# <a href="#InSensitive">Insensitive internal link</a>, 
# <a href="http://example.org">Example org link</a>]

Ищет HTML-элементы с атрибутом attribute, который имеет значение value.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('[href="#internal"]')
# [<a href="#internal">Internal link</a>]

Ищет HTML-элементы с атрибутом attribute, где значение value встречается в строке, представляющей список разделенный пробелом.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[class~=class2]')
# [<a href="#internal">Internal link</a>]

Ищет HTML-элементы с атрибутом attribute, значение которого представляет собой список разделенный черточками, и который начинается со значения value. =http]’) # [<a href=»http://example.com»>Example link</a>, # <a href=»http://example.org»>Example org link</a>]

Ищет HTML-элементы с атрибутом attribute, значение которого заканчивается на value.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[href$=org]')
# [<a href="http://example.org">Example org link</a>]

Ищет HTML-элементы с атрибутом attribute, значение которого содержит подстроку value.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<html>
<head></head>
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
</body>
</html>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[href*="example"]')
# [<a href="http://example.com">Example link</a>, 
# <a href="http://example.org">Example org link</a>]

Ищет HTML-элементы с атрибутом attribute, значение которого НЕ равно value (эквивалентно :not([attribute=value])).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example. com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('a[href!="#internal"]')
# или
>>> soup.select('a:not([href="#internal"])')
# [<a href="http://example.com">Example link</a>, 
# <a href="#InSensitive">Insensitive internal link</a>, 
# <a href="http://example.org">Example org link</a>]

Ищет HTML-элементы с атрибутом attribute, значение которого совпадает с value с учетом регистра.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example. org">Example org link</a></li>
</ul>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[href="#INTERNAL" s]')
# []
>>> soup.select('[href="#internal" s]')
# [<a href="#internal">Internal link</a>]

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

Списки селекторов.

Для объединения нескольких селекторов в списке, необходимо использовать запятую, например 'h2, p'. При представлении списка селекторов любой селектор в списке, соответствующий HTML-тегу, вернет этот элемент.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<h2>Title</h2>
<p>Paragraph</p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('h2, p')
# [<h2>Title</h2>, <p>Paragraph</p>]

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

Комбинаторы потомков объединяют два селектора пробелами, например 'body p'. Это означает, что второй элемент будет найден только в том случае, если у него есть предок, соответствующий первому элементу.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<div><p>Paragraph 1</p></div>
<div><p>Paragraph 2</p></div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('body p')
# [<p>Paragraph 1</p>, <p>Paragraph 2</p>]

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

Комбинатор дочерних элементов объединяют два селектора знаком >, например 'div > p'. Это означает, что второй элемент будет найден только в том случае, если у него есть родитель, соответствующий первому элементу.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<div><p>Paragraph 1</p></div>
<div><ul><li><p>Paragraph 2</p></li></ul></div>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('div > p')
# [<p>Paragraph 1</p>]

Комбинатор одноуровневых соседей.

Комбинаторы одноуровневых соседей объединяют два селектора знаком ~, например 'h2 ~ p'. Это означает, что второй элемент будет найден только в том случае, если у него есть одноуровневый сосед, который предшествует ему, и соответствует первому элементу.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('h2 ~ p')
# [<p>Paragraph 1</p>, <p>Paragraph 2</p>]

Комбинатор соседнего элемента.

Комбинатор соседнего элемента объединяет два селектора знаком +, например 'h2 + p'. Это означает, что второй элемент будет найден только в том случае, если перед ним непосредственно находится сосед, который соответствует первому элементу.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('h2 + p')
# [<p>Paragraph 1</p>]

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

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

Любые селекторы, которые не указаны здесь относятся к категории неприменимых.

Выбирает каждый элемент <a> или <area>, имеющий атрибут href, независимо от того, посещался ли он.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p>A link to <a href="http://example.com">click</a></p>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select(':link')
# [<a href="http://example.com">click</a>]

Выбирает любой элемент <input type="radio"/>, <input type="checkbox"/> или <option> (в элементе <select>), который отмечен или переключен в состояние включено.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<div>
  <input type="radio" name="my-input" checked>
  <label for="yes">Yes</label>
  <input type="radio" name="my-input">
  <label for="no">No</label>
</div>
<select name="my-select">
  <option value="opt1">Apples</option>
  <option value="opt2" selected>Grapes</option>
  <option value="opt3">Pears</option>
</select>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select(':checked')
# [<input checked="" name="my-input" type="radio"/>, 
# <option selected="" value="opt2">Grapes</option>]

Выбирает любой элемент формы, который является элементом по умолчанию среди группы связанных элементов, в том числе: <button>, <input type="radio"/>, <input type="checkbox"/> и <option> (в элементе <select>) .

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<form>
<input type="radio" name="season">
<label for="spring">Spring</label>
<input type="radio" name="season" checked>
<label for="summer">Summer</label>
<input type="radio" name="season">
<label for="fall">Fall</label>
<input type="radio" name="season">
<label for="winter">Winter</label>
<select>
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster" selected>Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
</form>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select(':default')
# [<input checked="" name="season" type="radio"/>, 
# <option selected="" value="hamster">Hamster</option>]

Выбирает любой отключенный элемент.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset>
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('input:disabled')
# [<input disabled="" placeholder="Name" type="text"/>, 
# <input disabled="" placeholder="Address" type="text"/>, 
# <input disabled="" placeholder="Zip Code" type="text"/>]

Выбирает элементы, у которых нет дочерних элементов и текста (пробелы игнорируются).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<span> <!-- comment --> </span>
<span></span>
<span><span>    </span></span>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('body:empty')
# [<span> <!-- comment --> </span>,
# <span></span>,
# <span>    </span>]

Выбирает любой активный/включенный элемент.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset>
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('input:enabled')
# [<input placeholder="Name" type="text"/>, 
# <input placeholder="Address" type="text"/>, 
# <input placeholder="Zip Code" type="text"/>, 
# <input checked="" type="checkbox"/>]

Выбирает первый элемент в группе одноуровневых элементов.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('p:first-child')
# [<p></p>]

Выбирает первый элемент данного типа в группе родственных элементов.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<span></span>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('span:first-of-type')
# [<span></span>]

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

Спецификации CSS4 говорится, что :has() поддерживают составные селекторы, а сложные селекторы запланированы для селекторов CSS5. BeautifulSoup4 поддерживает сложные селекторы.

Синтаксис:

• :has(selector);
• :has(> selector);
• :has(~ selector);
• :has(+ selector);
• :has(selector1, > selector2, ~ selector3, + selector4);

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<div><p>Test <span>paragraph</span></p></div>
<div><p>Another test paragraph</p></div>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('div:has(span, > .class)')
# [<div><p>Test <span>paragraph</span></p></div>, 
# <div><p>Another test paragraph</p></div>]

Выбирает все <input>, значения которых находятся в диапазоне в соответствии с их атрибутами type, min, и max.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input type="month" min="1980-02" max="2004-08" value="1999-05">
<input type="month" min="1980-02" max="2004-08" value="1979-02">
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select(':in-range')
# [<input max="2004-08" min="1980-02" type="month" value="1999-05"/>]

Выбирает все элементы формы, которые находятся в неопределенном состоянии.

Элемент считается неопределенным, если:

• У <input type="checkbox"/> установлен атрибут indeterminate.
• Группа <input type="radio"/> с одинаковым значением атрибута name не имеет выбранного значения checked.
• Элемент имеет тип <progress> без значения.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input type="checkbox" indeterminate>
<label for="checkbox1">I like cats.</label>
<input type="checkbox">
<label for="checkbox2">I like dogs.</label>
<form>
    <input type="radio" name="test">
    <label for="radio1">Yes</label>
    <input type="radio" name="test">
    <label for="radio2">No</label>
    <input type="radio" name="test">
    <label for="radio3">Maybe</label>
</form>
<form>
    <input type="radio" name="another">
    <label for="radio4">Red</label>
    <input type="radio" name="another" checked>
    <label for="radio5">Green</label>
    <input type="radio" name="another">
    <label for="radio6">Blue</label>
</form>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select(':indeterminate')
# [<input indeterminate="" type="checkbox"/>, 
# <input name="test" type="radio"/>, 
# <input name="test" type="radio"/>, 
# <input name="test" type="radio"/>]

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

Также поддерживается псевдоним :matches() , т.к. это было исходное имя селектора, и некоторые браузеры до сих пор его поддерживают. Настоятельно рекомендуется использовать :is(), поскольку поддержка :matches() может быть удалена в будущем.

Хотя в спецификациях CSS4 указано, что поддерживаются составные селекторы, некоторые браузеры (например Safari) поддерживают сложные селекторы, которые запланированы для селекторов CSS5. BeautifulSoup4 также поддерживает сложные селекторы.

Синтаксис:

• :is(selector1, selector2)

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p>Some text <span> in a paragraph</span>. 
<a href="http://google.com">Link.</a></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[id]:is(a, span)')
# [<span> in a paragraph</span>, 
# <a href="http://google.com">Link.</a>]

Выбирает последний элемент из группы родственных элементов.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('p:last-child')
# [<p></p>]

Выбирает последний элемент данного типа в группе родственных элементов. Если перевести «last of type«, то получится последний в своем роде.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<span></span>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('span:last-of-type')
# [<span></span>]

Выбирает все элементы, которые не соответствуют селектору. Спецификация CSS3 гласит, что :not() поддерживает только простые селекторы.

Синтаксис CSS 3:

• :not(simple-selector).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
   <div>Here is some text.</div>
   <div>Here is some more text.</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('div:not(:-soup-contains(more))')
[<div>Here is some text.</div>]

Для CSS 4:

Выбирает все элементы, которые не соответствуют ни одному из селекторов в списке селекторов. Хотя в спецификациях CSS4 указано, что поддерживаются составные селекторы, некоторые браузеры (Safari) поддерживают сложные селекторы, которые запланированы для селекторов CSS5. Soup Sieve также поддерживает сложные селекторы.

Синтаксис CSS 4:

• :not(compound.selector, complex > selector).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<html>
<head></head>
<body>
   <div>Here is some text.</div>
   <div>Here is some more text.</div>
</body>
</html>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('*:not(html, head, body)'))
# [<div>Here is some text.</div>, 
# <div>Here is some more text.</div>]

Сопоставляет элементы в зависимости от их положения в группе братьев и сестер.

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

Шаблоны в форме an+b выбирают элементы на основе их положения в одноуровневой группе для каждого положительного целого числа или нулевого значения n. Индекс первого элемента равен 1. Значения a и b должны быть целыми числами.

Синтаксис:

• :nth-child(even);
• :nth-child(odd);
• :nth-child(2);
• :nth-child(2n+2).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('p:nth-child(even)')
# [<p></p>, <p></p>, <p></p>]
>>> soup.select('p:nth-child(odd)')
# [<p></p>, <p></p>, <p></p>]
>>> soup.select('p:nth-child(2)')
# [<p></p>]
>>> soup.select('p:nth-child(-n+3)')
# [<p></p>, <p></p>, <p></p>]

Для CSS 4:

CSS 4 добавляет дополнительный шаблон в форме an+b of S, где S представляет собой список селекторов. Шаблон an+b также можно заменить на even или odd.

При использовании шаблона an+b of S, он будет выбирать элементы из подгруппы одноуровневых элементов, которые все соответствуют списку селектора ([of S]?), в зависимости от их положения в этой подгруппе, используя шаблон an+b для каждого положительного целого или нулевого значения n. Индекс первого элемента равен 1. Значения a и b должны быть целыми числами.

По сути, img:nth-of-type(2) будет эквивалентен :nth-child(2 of img). Преимущество использования :nth-child(an+b [of S]?) Перед :nth-of-type заключается в том, что :nth-of-type ограничивается типами, а :nth-child(an+b [of S ]?) могут использовать сложные селекторы.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('*:nth-child(-n+3 of [id])')
# [<p></p>, <p></p>, <p></p>]

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

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

Считая с конца, шаблоны в форме an+b выбирают элементы на основе их положения в одноуровневой группе для каждого положительного целого или нулевого значенияn. Индекс первого элемента равен1. Значенияaиb` должны быть целыми числами.

Синтаксис:

• :nth-last-child(even);
• :nth-last-child(odd);
• :nth-last-child(2);
• :nth-last-child(2n+2).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('p:nth-last-child(even)')
# [<p></p>, <p></p>, <p></p>]
>>> soup.select('p:nth-last-child(odd)')
# [<p></p>, <p></p>, <p></p>]
>>> soup.select('p:nth-last-child(2)')
# [<p></p>]
>>> soup.select('p:nth-last-child(-n+3)')
# [<p></p>, <p></p>, <p></p>]

Для CSS 4:

CSS 4 добавляет дополнительный шаблон в форме an+b of S, где S представляет собой список селекторов. шаблон an+b также можно заменить на even или odd.

Более подробно о поведении шаблона an+b of S смотрите описание в описание псевдокласса :nth-child() для CSS 4

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</html>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('*:nth-last-child(-n+3 of [id])')
# [<p></p>, <p></p>, <p></p>]

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

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

Шаблоны в форме an+b выбирают из подгруппы одноуровневых элементов, которые все соответствуют заданному типу, в зависимости от их положения для каждого положительного целого или нулевого значенияn. Индекс первого элемента равен 1. Значенияaиb` должны быть целыми числами. Исходное положение отсчитывается с конца.

Синтаксис:

• element:nth-last-of-type(even);
• element:nth-last-of-type(odd);
• element:nth-last-of-type(2);
• element:nth-last-of-type(2n+2).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<span></span>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('span:nth-last-of-type(even)')
# [<span></span>, <span></span>, <span></span>]
>>> soup.select('span:nth-last-of-type(odd)')
# [<span></span>, <span></span>, <span></span>]
>>> soup.select('p:nth-last-of-type(2)')
# [<p></p>]
>>> soup.select('p:nth-last-of-type(-n+3)')
# [<p></p>, <p></p>, <p></p>]

Сопоставляет элементы данного типа в зависимости от их положения в группе одноуровневых элементов.

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

Шаблоны в форме an+b выбирают из подгруппы одноуровневых элементов, которые все соответствуют заданному типу, в зависимости от их положения для каждого положительного целого или нулевого значенияn. Индекс первого элемента равен 1. Значенияaиb` должны быть целыми числами.

Синтаксис:

• element:nth-of-type(even);
• element:nth-of-type(odd);
• element:nth-of-type(2);
• element:nth-of-type(2n+2).

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<span></span>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select('span:nth-of-type(even)')
# [<span></span>, <span></span>, <span></span>]
>>> soup.select('span:nth-of-type(odd)')
# [<span></span>, <span></span>, <span></span>]
>>> soup.select('p:nth-of-type(2)')
# [<p></p>]
>>> soup.select('p:nth-of-type(-n+3)')
# [<p></p>, <p></p>, <p></p>]

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

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup. select('p:only-child')
# [<p></p>]

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

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p></p>
<p></p>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('span:only-of-type')
# [<span></span>]

Выбирает любой элемент <input>, <select> или <textarea>, для которого не задан атрибут required.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<form>
<input type="name" required>
<input type="checkbox" required>
<input type="email">
<textarea name="name" cols="30" rows="10" required></textarea>
<select name="nm" required>
    <!-- options -->
</select>
</form>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select(':optional')
# [<input type="email"/>]

Выбирает все элементы <input>, значения которых выходят за пределы диапазона, в соответствии с их атрибутами type, min и max.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input type="month" min="1980-02" max="2004-08" value="1999-05">
<input type="month" min="1980-02" max="2004-08" value="1979-02">
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select(':out-of-range')
# [<input max="2004-08" min="1980-02" type="month" value="1979-02"/>]

Выбирает элемент <input> или <textarea>, который в данный момент отображает текст — заполнитель с помощью атрибута placeholder.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input placeholder="This is some text">
<textarea placeholder="This is some text"></textarea>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select(':placeholder-shown')
# [<input placeholder="This is some text"/>, 
# <textarea placeholder="This is some text"></textarea>]

Выбирает элементы (<input> или <textarea>), которые пользователь не может редактировать. Это относится не только к элементам формы, но и к любому элементу, который может редактироваться пользователем, например к элементу <p> с установленным на нем contenteditable.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input>
<input disabled>
<input type="number" readonly>
<textarea></textarea>
<p>Not editable</p>
<p contenteditable="true">Editable text</p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('body :read-only')
# [<input disabled=""/>, 
# <input readonly="" type="number"/>, 
# <p>Not editable</p>]

Выбирает элементы (<input> или <textarea>), доступные для редактирования пользователем. Это относится не только к элементам формы, но и к любому элементу, который может быть отредактирован пользователем, например, к элементу <p> с установленным на нем значением contenteditable.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<input>
<input disabled>
<input type="number" readonly>
<textarea></textarea>
<p>Not editable</p>
<p contenteditable="true">Editable text</p>
</html>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('body :read-write')
# [<input/>, 
# <textarea></textarea>, 
# <p contenteditable="true">Editable text</p>]

Выбирает любой элемент <input>, <select> или <textarea>, для которого установлен атрибут required.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<form>
<input type="name" required>
<input type="checkbox" required>
<input type="email">
<textarea name="name" cols="30" rows="10" required></textarea>
<select name="nm" required>
    <!-- options -->
</select>
</form>
</body>
"""
>>> soup = bs(html, 'html. parser')
>>> soup.select(':required')
# [<input required="" type="name"/>, 
# <input required="" type="checkbox"/>, 
# <textarea cols="30" name="name" required="" rows="10"></textarea>, 
# <select name="nm" required="">
#     <!-- options -->
# </select>]

Псевдокласс :scope представляет элемент, для которого вызывается match, select, или filter. Например, если вызвать объект BeautifulSoup, представляющий весь документ, то псевдокласс :scope просто выберет весь HTML-документ.

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
   <div>Here is some text.</div>
   <div>Here is some more text.</div>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select_one('body').select(':scope > div')
# [<div>Here is some text. </div>, <div>Here is some more text.</div>]

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

Синтаксис:

• :where(selector1, selector2)

>>> from bs4 import BeautifulSoup as bs
>>> html = """
<body>
<p>Some text <span> in a paragraph</span>.
<a href="http://google.com">Link.</a></p>
</body>
"""
>>> soup = bs(html, 'html.parser')
>>> soup.select('[id]:where(a, span)')
# [<span> in a paragraph</span>, 
# <a href="http://google.com">Link.</a>]

Основы CSS. Часть 2. Комбинации селекторов, наследование, каскадирование и специфичность

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

В этой статье разберем немного более сложные вещи.

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

<div> <h4>Заголовок статьи 1</h4> <h4>Заголовок статьи 2</h4> </div> <div> <h4>Заголовок новости 1</h4> <h4>Заголовок новости 2</h4> </div>

Для заголовков и статей, и новостей, используются теги <h4>. Мы можем отформатировать эти заголовки, используя селектор элемента, например:

h4 { font-size: 1. 5rem; font-weight: bold; }

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

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

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

Мы можем поступить красивее, а именно использовать комбинации селекторов.

Содержание

• Комбинации селекторов.
  • Дочерний селектор
  • Комбинатор всех соседних элементов
  • Комбинатор следующего соседнего элемента
  • Комбинатор запятая
• Наследование
• Каскадность и специфичность
  • Каскадность
  • Специфичность
• Модификатор !important
• Практический совет

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

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

В задачу, описанную выше, мы можем решить, написав два правила.

Для заголовков статей:

.articles h4 { text-align: center; }

Для заголовков новостей:

.sidebar h4 { color: darkred; }

Здесь мы использовали комбинатор пробел .  Т.е. селектор .articles h4  выберет для изменений теги <h4> , которые находятся внутри элемента с классом articles (вне зависимости от уровня вложенности).

Этот комбинатор называется «комбинатор потомков» и используется очень часто.

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

Давайте немного изменим верстку блока со статьями.

<div> <h4>Заголовок статьи 1</h4> <h4>Заголовок статьи 2</h4> <div> <h4>Рекламная акция</h4> </div> <h4>Заголовок статьи 3</h4> <h4>Заголовок статьи 4</h4> </div>

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

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

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

.articles > h4 { text-align: center; }

Селектор .articles > h4  выберет для изменения теги h4, которые находятся непосредственно в элементе с классом articles , а теги рекламных заголовков затронуты не будут.

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

Комбинатор ~  выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.

<div class=»articles»> <h4 class=»first-article»>Заголовок статьи 1</h4> <h4>Заголовок статьи 2</h4> <div class=»promo»> <h4>Рекламная акция</h4> </div> <h4>Заголовок статьи 3</h4> <h4>Заголовок статьи 4</h4> </div>

. first-article ~ h4 { color: blue; }

В примере выше все заголовки <h4>, которые находятся после заголовка с классом .first-article , станут синего цвета. Заголовок, находящийся внутри <div> с классом .promo  затронут не будет, поскольку у него другой контейнер.

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

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

.first-article + * { margin-top: 3rem; }

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

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

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

h2, h3, h4, h5, h5, h6 { margin-bottom: 0; }

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

Наследование

Для сокращения количества правил в CSS имеется механизм наследования.

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

Для примера, рассмотрим правило:

body { color: blue; }

В примере выше, мы устанавливаем синий цвет текст для тега <body> . При этом все остальные элементы, находящиеся внутри этого тега, независимо от уровня вложенности, унаследуют синий цвет текста.

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

Наследуются далеко не все свойства. Свойства, относящиеся к тексту, наследуются – это такие свойства, как: color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing  и некоторые другие.

А вот свойства, которые отвечают за форматирование блоков не наследуются: background, border, display, float и clear, height, width, margin, overflow, padding, position, text-decoration, vertical-align, z-index  и другие.

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

В спецификации css имеется ключевое слово inherit . С его помощью можно принудительно наследовать любое свойство от родительского блока (как наследуемое, так и не наследуемое).

.sidebar p { overflow: inherit; }

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

Каскадность и специфичность

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

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

Каскадность

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

Посмотрите на пример:

<h4 class=»attention highlight»>Заголовок третьего уровня</h4>

h4 { font-size: 24px; } . attention { color: red; } .highlight { background-color: yellow; }

Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:

{ font-size: 24px; color: red; background-color: yellow; }

С каскадностью теснейшим образом связана специфичность.

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

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

Специфичность

Посмотрим пример:

<div class=»sidebar»> <h4>Заголовок новости</h4> </div>

.sidebar h4 { color: red; } h4 { color: blue; }

В примере цвет текста для тега <h4> , находящегося в контейнере с классом .sidebar , прописан 2 раза.

Вопрос: «Какой цвет будет у этого элемента?»

Ответ: «Красный, поскольку селектор . sidebar h4  более специфичен, еще говорят: селектор имеет больший вес».

Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.

• Тысяча – это встроенные стили, добавляемые непосредственно в сам элемент в HTML-разметке.
• Сотня – это идентификатор.
• Десятки – это классы.
• Единицы – это сам элемент или псевдоэлемент.

Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:

Селектор	Тысячи	Сотни	Десятки	Единицы	Специфичность
div	0	0	0	1	0001
.some-class	0	0	1	0	0010
#myid	0	1	0	0	0100
<p style=»color: red»>текст</p>	1	0	0	0	1000
. some-class div	0	0	1	1	0011
#myid .some-class div	0	1	1	1	0111
.some-class ul li	0	0	1	2	0012
.some-class .my-class p span	0	0	2	2	0022

В ситуации, если специфичность у селекторов одинакова, действовать будет правило, которое находится ниже в css-файле.

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

Модификатор !important

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

Модификатор !important  пишется в конце объявления, после значения перед точкой с запятой.

h4 { font-size: 24px !important; }

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

Практический совет

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

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

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

По инструментам разработчика Google Chrome у нас написана целая статья – читайте, изучайте, используйте.

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

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

1782 просмотров

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

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

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

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

  Руководство по продвинутым селекторам CSS — часть первая

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

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

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

  Часть первая (эта статья):

  #
  • Специфика CSS и каскад
  • Селектор универсальный — *
  • Селектор атрибутов — [атрибут]
  • Детский комбинатор — >
  • Общий комбинатор родственных элементов — ~
  • Смежный одноуровневый комбинатор — +

  Часть вторая:

  #
  • Псевдоклассы — например: :checked / :focus
  • Псевдоэлементы — например: ::before / ::after
  • Дополнительные ресурсы

  Специфика CSS и каскад

  #

  Ключевой концепцией для успешной настройки селекторов CSS является понимание того, что известно как специфика CSS, и «C» в CSS, что является каскадом.

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

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

  Повышение специфичности происходит в результате переопределения наследования от каскада.

  В качестве небольшого примера — какого цвета будет .item ?

   
   
   Элемент 
   
   

   #specific . item { 
   цвет: красный; 
   } 
   диапазон.элемент { 
   цвет: зеленый; 
   } 
   
   .item { 
   цвет: синий; 
   } 
   

  .item будет красным , потому что специфичность включения #id в селектор выигрывает у каскада и над селектором элемента.

  Это не означает добавлять #ids ко всем вашим элементам и селекторам, а скорее осознавать их влияние на специфичность.

  Ключевая концепция : Чем выше специфичность, тем труднее обойти правило.

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

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

  Если вы думаете: «Мне не нужно их изучать, потому что я использую фреймворк/систему дизайна», то вы сильно ограничиваете себя в плане использования CSS в полной мере.

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

  Универсальный переключатель

  #

  Универсальный селектор — * — назван так потому, что применяется ко всем элементам универсально.

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

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

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

  #

  Сброс блочной модели CSS

  Мое наиболее частое использование в качестве моего самого первого правила сброса CSS:

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

  Это означает, что мы хотим, чтобы все элементы включали отступов и границ в расчете блочной модели вместо добавления этих значений ширины к любым определенным размерам. Например, в следующем правиле .box будет иметь ширину 200 пикселей , а не 200 пикселей + 20 пикселей от заполнения:

   .box { 
   ширина: 200 пикселей; 
   отступ: 10 пикселей; 
   } 

  Вертикальный ритм

  Другое очень полезное приложение было рекомендовано Энди Беллом и Хейдоном Пикерингом на их сайте и в книге Every Layout и называется «Стек», который в самом простом виде выглядит так:

   * + * { 
   margin-top: 1. 5rem; 
   } 

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

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

   статья * + h3 { 
   margin-top: 4rem; 
   } 

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

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

  #

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

  Знаете ли вы, что можно добиться результатов сопоставления, аналогичных регулярному выражению, используя селекторы атрибутов CSS?

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

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

   [класс*="компонент_"] 

  Этот селектор выберет все элементы, класс которых содержит строку «component_», что означает, что она будет соответствовать «component_title» и «component_content».

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

   [класс*="component_" я] 

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

   а [класс] 

  Что бы выбрать все a (элементы связи), которые имеют любое значение класса .

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

  Практическое применение селекторов атрибутов

  #

  Помощь в анализе специальных возможностей

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

   img:not([alt]) { 
   контур: 2 пикселя сплошной красный; 
   } 

  Это добавит контур ко всем изображениям, которые не включают 9Атрибут 0015 alt .

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

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

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

  Одним из примеров является реализация взаимодействия аккордеона, когда вам нужно включить следующую кнопку, независимо от того, переключается ли логическое значение aria через JavaScript:

   Переключить 

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

   button[aria-expanded="false"] + .content { 
   /* скрытые стили */ 
   } 
   button[aria-expanded="true"] + .content { 
   /* видимые стили */ 
   } 

  Стилизация некнопочных навигационных ссылок

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

   навигация: не ([класс]) 

  Удалить стиль списка по умолчанию

  Еще один совет, который я начал использовать от Энди Белла и его современного сброса CSS, заключается в удалении стиля списка на основе наличия атрибута роли :

  .

   /* Удалить стили списка для элементов ul, ol с ролью списка, 
   что предполагает удаление стилей по умолчанию */ 
   ul[role="list"], 
   ol[role="list"] { 
   list-style : никто; 
   } 

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

  #

  Селектор дочернего комбинатора — > — очень эффективен для добавления небольшого количества специфичности, чтобы уменьшить область применения стилей к потомкам элементов. Это единственный селектор, который работает с уровнями элементов и может быть объединен для выбора вложенных элементов.

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

  Другими словами, тогда как article p выбирает все p внутри article , article > p выбирает только те абзацы, которые находятся непосредственно внутри статьи, не вложенные в другие элементы.

  ✅ Выбрано с артикулом > стр

   
   
   
  Привет, мир
   
   
   

  🚫 Не выбрано с артикулом > p

   
   
   
   
   
  Привет, мир
   
   
   
    

  Практическое применение детского комбинатора

  #

  Вложенные ссылки списка навигации

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

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

   nav > ul > li > a { 
   вес шрифта: полужирный; 
   } 

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

  Селекторы элементов области видимости

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

  В этом случае вы можете изменить footer на body > footer .

  Стилизация встроенного/стороннего контента

  Иногда вы действительно не можете контролировать имена классов, идентификаторы или даже разметку. Например, для рекламы или другого контента на основе JavaScript (не iframe).

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

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

  Комбинатор общего назначения

  #

  Общий комбинатор родственных элементов — ~ — выбирает определенные элементы, расположенные где-то после предшествующего (ранее определенного) элемента и находящиеся внутри одного и того же родителя .

  Например, p ~ img будет стилизовать все изображения, расположенные где-то после абзаца, при условии, что они имеют одного и того же родителя.

  Это означает, что будут выбраны все следующие изображения:

   
   
   
  Абзац
   
    
  Заголовок 2
   
    png" alt="Image" /> 
   
  Заголовок 3
    
    
   
   

  Но не изображение в этом сценарии:

   
   
    
   
  Абзац
   
   
   

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

  Практическое применение универсального комбинатора братьев и сестер

  #

  Визуальная индикация изменения состояния

  Объединение общего родственного комбинатора с селекторами псевдоклассов с отслеживанием состояния, такими как :checked может дать интересные результаты.

  Учитывая следующий HTML-код для флажка:

    
   Я принимаю условия 
    

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

   #terms:checked ~ p { 
   стиль шрифта: курсив; 
   цвет: #797979; 
   } 

  Вариации с низкой специфичностью

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

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

  Правило добавляет небольшое поле, уменьшает размер шрифта и осветляет цвет текста для любого элемента, следующего за изображением:

   img ~ * { 
   размер шрифта: 0.9rem; 
   цвет: #797979; 
   поле: 1rem 1rem 0; 
   } 

  Вы можете поэкспериментировать с этими общими результатами комбинатора родственных элементов в этом CodePen.

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

  Кроме того, поскольку оно применяется только в том случае, если элементы являются общими прямыми потомками родительского элемента изображения (в данном случае это li ), после переноса содержимого в другой элемент правило будет применяться только до тех пор, пока наследование не будет использоваться дочерними элементами. Чтобы лучше понять это, попробуйте обернуть содержимое последнего элемента карточки в div. Цвет и поля будут унаследованы на div и элементы type, но собственный стиль браузера для h4 предотвращает наследование размера шрифта из общего родственного комбинатора, поскольку собственное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на . раздел .

  Соседний одноуровневый комбинатор

  #

  Смежный комбинатор родственного элемента — + — выбирает элемент, который следует непосредственно за предшествующим (ранее определенным) элементом.

  Мы уже использовали это в примерах универсального селектора — * + * — для применения верхнего поля только к элементам, которые следуют за другим элементом — так что давайте перейдем к другим примерам!

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

  #

  Polyfill For Lack для поддержки Flexbox Gap в навигации

  Поддержка разрыва

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

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

   nav ul li + li { 
   левое поле: 2rem; 
   } 

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

  Применение интервалов между метками формы и входными данными

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

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

  .

   label + input { 
   margin-top: 0. 25rem; 
   } 
   ввод + метка { 
   margin-top: 2rem; 
   } 
   

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

  Перейдите ко второй части, где мы узнаем о псевдоклассах и псевдоэлементах . Отличным местом для практики ваших новых знаний о селекторах является мой другой проект Style Stage — современная демонстрация CSS, стилизованная под вклады сообщества. И, если вы узнали что-то новое из этого руководства и можете, я был бы признателен за кофе, чтобы помочь мне предоставить вам больше руководств и ресурсов!

  Руководство по продвинутым селекторам CSS — часть первая

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

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

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

  Часть первая (эта статья):

  #
  • Специфика CSS и каскад
  • Селектор универсальный — *
  • Селектор атрибутов — [атрибут]
  • Детский комбинатор — >
  • Общий комбинатор родственных элементов — ~
  • Смежный одноуровневый комбинатор — +

  Часть вторая:

  #
  • Псевдоклассы — например: :checked / :focus
  • Псевдоэлементы — например: ::before / ::after
  • Дополнительные ресурсы

  Специфика CSS и каскад

  #

  Ключевой концепцией для успешной настройки селекторов CSS является понимание того, что известно как специфика CSS, и «C» в CSS, что является каскадом.

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

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

  Повышение специфичности происходит в результате переопределения наследования от каскада.

  В качестве небольшого примера — какого цвета будет .item ?

   
   
   Элемент 
   
   

   #specific . item { 
   цвет: красный; 
   } 
   диапазон.элемент { 
   цвет: зеленый; 
   } 
   
   .item { 
   цвет: синий; 
   } 
   

  .item будет красным , потому что специфичность включения #id в селектор выигрывает у каскада и над селектором элемента.

  Это не означает добавлять #ids ко всем вашим элементам и селекторам, а скорее осознавать их влияние на специфичность.

  Ключевая концепция : Чем выше специфичность, тем труднее обойти правило.

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

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

  Если вы думаете: «Мне не нужно их изучать, потому что я использую фреймворк/систему дизайна», то вы сильно ограничиваете себя в плане использования CSS в полной мере.

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

  Универсальный переключатель

  #

  Универсальный селектор — * — назван так потому, что применяется ко всем элементам универсально.

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

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

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

  #

  Сброс блочной модели CSS

  Мое наиболее частое использование в качестве моего самого первого правила сброса CSS:

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

  Это означает, что мы хотим, чтобы все элементы включали отступов и границ в расчете блочной модели вместо добавления этих значений ширины к любым определенным размерам. Например, в следующем правиле .box будет иметь ширину 200 пикселей , а не 200 пикселей + 20 пикселей от заполнения:

   .box { 
   ширина: 200 пикселей; 
   отступ: 10 пикселей; 
   } 

  Вертикальный ритм

  Другое очень полезное приложение было рекомендовано Энди Беллом и Хейдоном Пикерингом на их сайте и в книге Every Layout и называется «Стек», который в самом простом виде выглядит так:

   * + * { 
   margin-top: 1. 5rem; 
   } 

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

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

   статья * + h3 { 
   margin-top: 4rem; 
   } 

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

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

  #

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

  Знаете ли вы, что можно добиться результатов сопоставления, аналогичных регулярному выражению, используя селекторы атрибутов CSS?

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

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

   [класс*="компонент_"] 

  Этот селектор выберет все элементы, класс которых содержит строку «component_», что означает, что она будет соответствовать «component_title» и «component_content».

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

   [класс*="component_" я] 

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

   а [класс] 

  Что бы выбрать все a (элементы связи), которые имеют любое значение класса .

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

  Практическое применение селекторов атрибутов

  #

  Помощь в анализе специальных возможностей

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

   img:not([alt]) { 
   контур: 2 пикселя сплошной красный; 
   } 

  Это добавит контур ко всем изображениям, которые не включают 9Атрибут 0015 alt .

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

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

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

  Одним из примеров является реализация взаимодействия аккордеона, когда вам нужно включить следующую кнопку, независимо от того, переключается ли логическое значение aria через JavaScript:

   Переключить 

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

   button[aria-expanded="false"] + .content { 
   /* скрытые стили */ 
   } 
   button[aria-expanded="true"] + .content { 
   /* видимые стили */ 
   } 

  Стилизация некнопочных навигационных ссылок

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

   навигация: не ([класс]) 

  Удалить стиль списка по умолчанию

  Еще один совет, который я начал использовать от Энди Белла и его современного сброса CSS, заключается в удалении стиля списка на основе наличия атрибута роли :

  .

   /* Удалить стили списка для элементов ul, ol с ролью списка, 
   что предполагает удаление стилей по умолчанию */ 
   ul[role="list"], 
   ol[role="list"] { 
   list-style : никто; 
   } 

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

  #

  Селектор дочернего комбинатора — > — очень эффективен для добавления небольшого количества специфичности, чтобы уменьшить область применения стилей к потомкам элементов. Это единственный селектор, который работает с уровнями элементов и может быть объединен для выбора вложенных элементов.

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

  Другими словами, тогда как article p выбирает все p внутри article , article > p выбирает только те абзацы, которые находятся непосредственно внутри статьи, не вложенные в другие элементы.

  ✅ Выбрано с артикулом > стр

   
   
   
  Привет, мир
   
   
   

  🚫 Не выбрано с артикулом > p

   
   
   
   
   
  Привет, мир
   
   
   
    

  Практическое применение детского комбинатора

  #

  Вложенные ссылки списка навигации

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

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

   nav > ul > li > a { 
   вес шрифта: полужирный; 
   } 

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

  Селекторы элементов области видимости

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

  В этом случае вы можете изменить footer на body > footer .

  Стилизация встроенного/стороннего контента

  Иногда вы действительно не можете контролировать имена классов, идентификаторы или даже разметку. Например, для рекламы или другого контента на основе JavaScript (не iframe).

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

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

  Комбинатор общего назначения

  #

  Общий комбинатор родственных элементов — ~ — выбирает определенные элементы, расположенные где-то после предшествующего (ранее определенного) элемента и находящиеся внутри одного и того же родителя .

  Например, p ~ img будет стилизовать все изображения, расположенные где-то после абзаца, при условии, что они имеют одного и того же родителя.

  Это означает, что будут выбраны все следующие изображения:

   
   
   
  Абзац
   
    
  Заголовок 2
   
    png" alt="Image" /> 
   
  Заголовок 3
    
    
   
   

  Но не изображение в этом сценарии:

   
   
    
   
  Абзац
   
   
   

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

  Практическое применение универсального комбинатора братьев и сестер

  #

  Визуальная индикация изменения состояния

  Объединение общего родственного комбинатора с селекторами псевдоклассов с отслеживанием состояния, такими как :checked может дать интересные результаты.

  Учитывая следующий HTML-код для флажка:

    
   Я принимаю условия 
    

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

   #terms:checked ~ p { 
   стиль шрифта: курсив; 
   цвет: #797979; 
   } 

  Вариации с низкой специфичностью

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

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

  Правило добавляет небольшое поле, уменьшает размер шрифта и осветляет цвет текста для любого элемента, следующего за изображением:

   img ~ * { 
   размер шрифта: 0.9rem; 
   цвет: #797979; 
   поле: 1rem 1rem 0; 
   } 

  Вы можете поэкспериментировать с этими общими результатами комбинатора родственных элементов в этом CodePen.

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

  Кроме того, поскольку оно применяется только в том случае, если элементы являются общими прямыми потомками родительского элемента изображения (в данном случае это li ), после переноса содержимого в другой элемент правило будет применяться только до тех пор, пока наследование не будет использоваться дочерними элементами. Чтобы лучше понять это, попробуйте обернуть содержимое последнего элемента карточки в div. Цвет и поля будут унаследованы на div и элементы type, но собственный стиль браузера для h4 предотвращает наследование размера шрифта из общего родственного комбинатора, поскольку собственное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на . раздел .

  Соседний одноуровневый комбинатор

  #

  Смежный комбинатор родственного элемента — + — выбирает элемент, который следует непосредственно за предшествующим (ранее определенным) элементом.

  Мы уже использовали это в примерах универсального селектора — * + * — для применения верхнего поля только к элементам, которые следуют за другим элементом — так что давайте перейдем к другим примерам!

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

  #

  Polyfill For Lack для поддержки Flexbox Gap в навигации

  Поддержка разрыва

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

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

   nav ul li + li { 
   левое поле: 2rem; 
   } 

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

  Применение интервалов между метками формы и входными данными

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

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

  .

   label + input { 
   margin-top: 0. 25rem; 
   } 
   ввод + метка { 
   margin-top: 2rem; 
   } 
   

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

  Перейдите ко второй части, где мы узнаем о псевдоклассах и псевдоэлементах . Отличным местом для практики ваших новых знаний о селекторах является мой другой проект Style Stage — современная демонстрация CSS, стилизованная под вклады сообщества. И, если вы узнали что-то новое из этого руководства и можете, я был бы признателен за кофе, чтобы помочь мне предоставить вам больше руководств и ресурсов!

  Руководство по продвинутым селекторам CSS — часть первая

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

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

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

  Часть первая (эта статья):

  #
  • Специфика CSS и каскад
  • Селектор универсальный — *
  • Селектор атрибутов — [атрибут]
  • Детский комбинатор — >
  • Общий комбинатор родственных элементов — ~
  • Смежный одноуровневый комбинатор — +

  Часть вторая:

  #
  • Псевдоклассы — например: :checked / :focus
  • Псевдоэлементы — например: ::before / ::after
  • Дополнительные ресурсы

  Специфика CSS и каскад

  #

  Ключевой концепцией для успешной настройки селекторов CSS является понимание того, что известно как специфика CSS, и «C» в CSS, что является каскадом.

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

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

  Повышение специфичности происходит в результате переопределения наследования от каскада.

  В качестве небольшого примера — какого цвета будет .item ?

   
   
   Элемент 
   
   

   #specific . item { 
   цвет: красный; 
   } 
   диапазон.элемент { 
   цвет: зеленый; 
   } 
   
   .item { 
   цвет: синий; 
   } 
   

  .item будет красным , потому что специфичность включения #id в селектор выигрывает у каскада и над селектором элемента.

  Это не означает добавлять #ids ко всем вашим элементам и селекторам, а скорее осознавать их влияние на специфичность.

  Ключевая концепция : Чем выше специфичность, тем труднее обойти правило.

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

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

  Если вы думаете: «Мне не нужно их изучать, потому что я использую фреймворк/систему дизайна», то вы сильно ограничиваете себя в плане использования CSS в полной мере.

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

  Универсальный переключатель

  #

  Универсальный селектор — * — назван так потому, что применяется ко всем элементам универсально.

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

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

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

  #

  Сброс блочной модели CSS

  Мое наиболее частое использование в качестве моего самого первого правила сброса CSS:

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

  Это означает, что мы хотим, чтобы все элементы включали отступов и границ в расчете блочной модели вместо добавления этих значений ширины к любым определенным размерам. Например, в следующем правиле .box будет иметь ширину 200 пикселей , а не 200 пикселей + 20 пикселей от заполнения:

   .box { 
   ширина: 200 пикселей; 
   отступ: 10 пикселей; 
   } 

  Вертикальный ритм

  Другое очень полезное приложение было рекомендовано Энди Беллом и Хейдоном Пикерингом на их сайте и в книге Every Layout и называется «Стек», который в самом простом виде выглядит так:

   * + * { 
   margin-top: 1. 5rem; 
   } 

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

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

   статья * + h3 { 
   margin-top: 4rem; 
   } 

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

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

  #

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

  Знаете ли вы, что можно добиться результатов сопоставления, аналогичных регулярному выражению, используя селекторы атрибутов CSS?

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

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

   [класс*="компонент_"] 

  Этот селектор выберет все элементы, класс которых содержит строку «component_», что означает, что она будет соответствовать «component_title» и «component_content».

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

   [класс*="component_" я] 

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

   а [класс] 

  Что бы выбрать все a (элементы связи), которые имеют любое значение класса .

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

  Практическое применение селекторов атрибутов

  #

  Помощь в анализе специальных возможностей

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

   img:not([alt]) { 
   контур: 2 пикселя сплошной красный; 
   } 

  Это добавит контур ко всем изображениям, которые не включают 9Атрибут 0015 alt .

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

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

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

  Одним из примеров является реализация взаимодействия аккордеона, когда вам нужно включить следующую кнопку, независимо от того, переключается ли логическое значение aria через JavaScript:

   Переключить 

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

   button[aria-expanded="false"] + .content { 
   /* скрытые стили */ 
   } 
   button[aria-expanded="true"] + .content { 
   /* видимые стили */ 
   } 

  Стилизация некнопочных навигационных ссылок

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

   навигация: не ([класс]) 

  Удалить стиль списка по умолчанию

  Еще один совет, который я начал использовать от Энди Белла и его современного сброса CSS, заключается в удалении стиля списка на основе наличия атрибута роли :

  .

   /* Удалить стили списка для элементов ul, ol с ролью списка, 
   что предполагает удаление стилей по умолчанию */ 
   ul[role="list"], 
   ol[role="list"] { 
   list-style : никто; 
   } 

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

  #

  Селектор дочернего комбинатора — > — очень эффективен для добавления небольшого количества специфичности, чтобы уменьшить область применения стилей к потомкам элементов. Это единственный селектор, который работает с уровнями элементов и может быть объединен для выбора вложенных элементов.

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

  Другими словами, тогда как article p выбирает все p внутри article , article > p выбирает только те абзацы, которые находятся непосредственно внутри статьи, не вложенные в другие элементы.

  ✅ Выбрано с артикулом > стр

   
   
   
  Привет, мир
   
   
   

  🚫 Не выбрано с артикулом > p

   
   
   
   
   
  Привет, мир
   
   
   
    

  Практическое применение детского комбинатора

  #

  Вложенные ссылки списка навигации

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

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

   nav > ul > li > a { 
   вес шрифта: полужирный; 
   } 

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

  Селекторы элементов области видимости

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

  В этом случае вы можете изменить footer на body > footer .

  Стилизация встроенного/стороннего контента

  Иногда вы действительно не можете контролировать имена классов, идентификаторы или даже разметку. Например, для рекламы или другого контента на основе JavaScript (не iframe).

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

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

  Комбинатор общего назначения

  #

  Общий комбинатор родственных элементов — ~ — выбирает определенные элементы, расположенные где-то после предшествующего (ранее определенного) элемента и находящиеся внутри одного и того же родителя .

  Например, p ~ img будет стилизовать все изображения, расположенные где-то после абзаца, при условии, что они имеют одного и того же родителя.

  Это означает, что будут выбраны все следующие изображения:

   
   
   
  Абзац
   
    
  Заголовок 2
   
    png" alt="Image" /> 
   
  Заголовок 3
    
    
   
   

  Но не изображение в этом сценарии:

   
   
    
   
  Абзац
   
   
   

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

  Практическое применение универсального комбинатора братьев и сестер

  #

  Визуальная индикация изменения состояния

  Объединение общего родственного комбинатора с селекторами псевдоклассов с отслеживанием состояния, такими как :checked может дать интересные результаты.

  Учитывая следующий HTML-код для флажка:

    
   Я принимаю условия 
    

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

   #terms:checked ~ p { 
   стиль шрифта: курсив; 
   цвет: #797979; 
   } 

  Вариации с низкой специфичностью

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

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

  Правило добавляет небольшое поле, уменьшает размер шрифта и осветляет цвет текста для любого элемента, следующего за изображением:

   img ~ * { 
   размер шрифта: 0.9rem; 
   цвет: #797979; 
   поле: 1rem 1rem 0; 
   } 

  Вы можете поэкспериментировать с этими общими результатами комбинатора родственных элементов в этом CodePen.

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

  Кроме того, поскольку оно применяется только в том случае, если элементы являются общими прямыми потомками родительского элемента изображения (в данном случае это li ), после переноса содержимого в другой элемент правило будет применяться только до тех пор, пока наследование не будет использоваться дочерними элементами. Чтобы лучше понять это, попробуйте обернуть содержимое последнего элемента карточки в div. Цвет и поля будут унаследованы на div и элементы type, но собственный стиль браузера для h4 предотвращает наследование размера шрифта из общего родственного комбинатора, поскольку собственное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на . раздел .

  Соседний одноуровневый комбинатор

  #

  Смежный комбинатор родственного элемента — + — выбирает элемент, который следует непосредственно за предшествующим (ранее определенным) элементом.

  Мы уже использовали это в примерах универсального селектора — * + * — для применения верхнего поля только к элементам, которые следуют за другим элементом — так что давайте перейдем к другим примерам!

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

  #

  Polyfill For Lack для поддержки Flexbox Gap в навигации

  Поддержка разрыва

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

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

   nav ul li + li { 
   левое поле: 2rem; 
   } 

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

  Применение интервалов между метками формы и входными данными

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

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

  .

   label + input { 
   margin-top: 0. 25rem; 
   } 
   ввод + метка { 
   margin-top: 2rem; 
   } 
   

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

  Перейдите ко второй части, где мы узнаем о псевдоклассах и псевдоэлементах . Отличным местом для практики ваших новых знаний о селекторах является мой другой проект Style Stage — современная демонстрация CSS, стилизованная под вклады сообщества. И, если вы узнали что-то новое из этого руководства и можете, я был бы признателен за кофе, чтобы помочь мне предоставить вам больше руководств и ресурсов!

  Руководство по продвинутым селекторам CSS — часть первая

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

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

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

  Часть первая (эта статья):

  #
  • Специфика CSS и каскад
  • Селектор универсальный — *
  • Селектор атрибутов — [атрибут]
  • Детский комбинатор — >
  • Общий комбинатор родственных элементов — ~
  • Смежный одноуровневый комбинатор — +

  Часть вторая:

  #
  • Псевдоклассы — например: :checked / :focus
  • Псевдоэлементы — например: ::before / ::after
  • Дополнительные ресурсы

  Специфика CSS и каскад

  #

  Ключевой концепцией для успешной настройки селекторов CSS является понимание того, что известно как специфика CSS, и «C» в CSS, что является каскадом.

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

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

  Повышение специфичности происходит в результате переопределения наследования от каскада.

  В качестве небольшого примера — какого цвета будет .item ?

   
   
   Элемент 
   
   

   #specific . item { 
   цвет: красный; 
   } 
   диапазон.элемент { 
   цвет: зеленый; 
   } 
   
   .item { 
   цвет: синий; 
   } 
   

  .item будет красным , потому что специфичность включения #id в селектор выигрывает у каскада и над селектором элемента.

  Это не означает добавлять #ids ко всем вашим элементам и селекторам, а скорее осознавать их влияние на специфичность.

  Ключевая концепция : Чем выше специфичность, тем труднее обойти правило.

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

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

  Если вы думаете: «Мне не нужно их изучать, потому что я использую фреймворк/систему дизайна», то вы сильно ограничиваете себя в плане использования CSS в полной мере.

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

  Универсальный переключатель

  #

  Универсальный селектор — * — назван так потому, что применяется ко всем элементам универсально.

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

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

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

  #

  Сброс блочной модели CSS

  Мое наиболее частое использование в качестве моего самого первого правила сброса CSS:

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

  Это означает, что мы хотим, чтобы все элементы включали отступов и границ в расчете блочной модели вместо добавления этих значений ширины к любым определенным размерам. Например, в следующем правиле .box будет иметь ширину 200 пикселей , а не 200 пикселей + 20 пикселей от заполнения:

   .box { 
   ширина: 200 пикселей; 
   отступ: 10 пикселей; 
   } 

  Вертикальный ритм

  Другое очень полезное приложение было рекомендовано Энди Беллом и Хейдоном Пикерингом на их сайте и в книге Every Layout и называется «Стек», который в самом простом виде выглядит так:

   * + * { 
   margin-top: 1. 5rem; 
   } 

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

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

   статья * + h3 { 
   margin-top: 4rem; 
   } 

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

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

  #

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

  Знаете ли вы, что можно добиться результатов сопоставления, аналогичных регулярному выражению, используя селекторы атрибутов CSS?

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

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

   [класс*="компонент_"] 

  Этот селектор выберет все элементы, класс которых содержит строку «component_», что означает, что она будет соответствовать «component_title» и «component_content».

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

   [класс*="component_" я] 

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

   а [класс] 

  Что бы выбрать все a (элементы связи), которые имеют любое значение класса .

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

  Практическое применение селекторов атрибутов

  #

  Помощь в анализе специальных возможностей

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

   img:not([alt]) { 
   контур: 2 пикселя сплошной красный; 
   } 

  Это добавит контур ко всем изображениям, которые не включают 9Атрибут 0015 alt .

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

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

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

  Одним из примеров является реализация взаимодействия аккордеона, когда вам нужно включить следующую кнопку, независимо от того, переключается ли логическое значение aria через JavaScript:

   Переключить 

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

   button[aria-expanded="false"] + .content { 
   /* скрытые стили */ 
   } 
   button[aria-expanded="true"] + .content { 
   /* видимые стили */ 
   } 

  Стилизация некнопочных навигационных ссылок

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

   навигация: не ([класс]) 

  Удалить стиль списка по умолчанию

  Еще один совет, который я начал использовать от Энди Белла и его современного сброса CSS, заключается в удалении стиля списка на основе наличия атрибута роли :

  .

   /* Удалить стили списка для элементов ul, ol с ролью списка, 
   что предполагает удаление стилей по умолчанию */ 
   ul[role="list"], 
   ol[role="list"] { 
   list-style : никто; 
   } 

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

  #

  Селектор дочернего комбинатора — > — очень эффективен для добавления небольшого количества специфичности, чтобы уменьшить область применения стилей к потомкам элементов. Это единственный селектор, который работает с уровнями элементов и может быть объединен для выбора вложенных элементов.

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

  Другими словами, тогда как article p выбирает все p внутри article , article > p выбирает только те абзацы, которые находятся непосредственно внутри статьи, не вложенные в другие элементы.

  ✅ Выбрано с артикулом > стр

   
   
   
  Привет, мир
   
   
   

  🚫 Не выбрано с артикулом > p

   
   
   
   
   
  Привет, мир
   
   
   
    

  Практическое применение детского комбинатора

  #

  Вложенные ссылки списка навигации

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

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

   nav > ul > li > a { 
   вес шрифта: полужирный; 
   } 

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

  Селекторы элементов области видимости

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

  В этом случае вы можете изменить footer на body > footer .

  Стилизация встроенного/стороннего контента

  Иногда вы действительно не можете контролировать имена классов, идентификаторы или даже разметку. Например, для рекламы или другого контента на основе JavaScript (не iframe).

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

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

  Комбинатор общего назначения

  #

  Общий комбинатор родственных элементов — ~ — выбирает определенные элементы, расположенные где-то после предшествующего (ранее определенного) элемента и находящиеся внутри одного и того же родителя .

  Например, p ~ img будет стилизовать все изображения, расположенные где-то после абзаца, при условии, что они имеют одного и того же родителя.

  Это означает, что будут выбраны все следующие изображения:

   
   
   
  Абзац
   
    
  Заголовок 2
   
    png" alt="Image" /> 
   
  Заголовок 3
    
    
   
   

  Но не изображение в этом сценарии:

   
   
    
   
  Абзац
   
   
   

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

  Практическое применение универсального комбинатора братьев и сестер

  #

  Визуальная индикация изменения состояния

  Объединение общего родственного комбинатора с селекторами псевдоклассов с отслеживанием состояния, такими как :checked может дать интересные результаты.

  Учитывая следующий HTML-код для флажка:

    
   Я принимаю условия 
    

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

   #terms:checked ~ p { 
   стиль шрифта: курсив; 
   цвет: #797979; 
   } 

  Вариации с низкой специфичностью

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

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

  Правило добавляет небольшое поле, уменьшает размер шрифта и осветляет цвет текста для любого элемента, следующего за изображением:

   img ~ * { 
   размер шрифта: 0.9rem; 
   цвет: #797979; 
   поле: 1rem 1rem 0; 
   } 

  Вы можете поэкспериментировать с этими общими результатами комбинатора родственных элементов в этом CodePen.

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

  Кроме того, поскольку оно применяется только в том случае, если элементы являются общими прямыми потомками родительского элемента изображения (в данном случае это li ), после переноса содержимого в другой элемент правило будет применяться только до тех пор, пока наследование не будет использоваться дочерними элементами. Чтобы лучше понять это, попробуйте обернуть содержимое последнего элемента карточки в div. Цвет и поля будут унаследованы на div и элементы type, но собственный стиль браузера для h4 предотвращает наследование размера шрифта из общего родственного комбинатора, поскольку собственное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на . раздел .

  Соседний одноуровневый комбинатор

  #

  Смежный комбинатор родственного элемента — + — выбирает элемент, который следует непосредственно за предшествующим (ранее определенным) элементом.

  Мы уже использовали это в примерах универсального селектора — * + * — для применения верхнего поля только к элементам, которые следуют за другим элементом — так что давайте перейдем к другим примерам!

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

  #

  Polyfill For Lack для поддержки Flexbox Gap в навигации

  Поддержка разрыва

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

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

   nav ul li + li { 
   левое поле: 2rem; 
   } 

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

  Применение интервалов между метками формы и входными данными

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

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

  .

   label + input { 
   margin-top: 0. 25rem; 
   } 
   ввод + метка { 
   margin-top: 2rem; 
   } 
   

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

  Перейдите ко второй части, где мы узнаем о псевдоклассах и псевдоэлементах . Отличным местом для практики ваших новых знаний о селекторах является мой другой проект Style Stage — современная демонстрация CSS, стилизованная под вклады сообщества. И, если вы узнали что-то новое из этого руководства и можете, я был бы признателен за кофе, чтобы помочь мне предоставить вам больше руководств и ресурсов!

  Расширенные селекторы в CSS — GeeksforGeeks

  Просмотреть обсуждение

  Улучшить статью

  Сохранить статью

  • Последнее обновление: 17 сент, 2021

• Читать
• Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

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

• Селектор смежных братьев и сестер: Выбирает все элементы, которые являются соседними братьями и сестрами указанных элементов. Он выбирает второй элемент, если он непосредственно следует за первым элементом.
  Синтаксис : выбирает теги ul, которые следуют сразу за тегом h5.

html

h5+ul{      граница: 4 пикселя, сплошная красная; }

Example:

html

< html >     < head >        < заголовок >соседний заголовок >        < стиль 6 6 стиль0016 = "Текст/CSS" > UL+H5 { Граница: 4PX SOLID RED;           }        style >     head >     < body >        < h2 >GeeksForGeeks h2 >        < ul >           < li >Language li >           < li >Концепция li 9           < li >Knowledge li >        ul >        < h5 >Coding h5 >        < h3 >Time h3 >     body > html >

Output:

• Attribute Selector: It selects a particular type of inputs .
  Синтаксис:

html

input[type="checkbox"]{      background      9001; }

Example:

html

< html >     < head >        < заголовок >Атрибут заголовок >        < стиль тип 0016 = "Текст/CSS" > A [href = "http://www. google.com"] { . } > .0016 > < A HREF = "http://www.google.com" целевой = = = = = = = = = = = = = = = = = = = = = = = = 9. / a >< br >        < a href = "http://www. wikipedia.org" target = "_верх" >wikipedia.org a >     body > html >

Output:
 

• Селектор n-го типа: Выбирает элемент по его положению и типу.
  Синтаксис: Выберите конкретный цифровой тег для внесения изменений.

html

div:nth-of-type(5){      background:purple; }

Если мы хотим внести изменения во все четные ли.

html

li:nth-of-type(even){      фон: желтый; }

Example:

html

< html >     < head >        < title >nth Название > < Стиль Тип = "Текст/CSS" >           ul:nth-of-type(2){           фон: желтый;           }        style >     head >     < body >        < ul >           < li >java li >           < li >python li > < LI > C ++ LI > UL > UL > UL > UL > UL > . 0016        < ul >           < li >HTML li >           < li >CSS< / LI > < LI > PHP LI > 0015        ul >        < ul >           < li >C# li > < LI > R LI > < LI > MATLAB < LI > MATLAB 0016 li >        ul >     body > html >

Вывод:
 

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

html

p > div { 0dger-Blue 90 background; }

Example:

html

< html >     < head > < Название > Детский комбинатор Название > < Стиль < < < .           div > span {           background-color: DodgerBlue;           }        style >     head >     < body >        < div >           < span >внутри div и находится внутри span span >  9   129 9012   < p >inside div but not inside span              < span >inside div p span >           P > DIV > < SPREN < SPREN < . 0016 >not inside div span >     body > html >

Output:

• Он отличается от селектора потомков, поскольку селектор потомков выбирает тот элемент, который соответствует второму элементу, который является потомком элемента, соответствующего первому элементу (это может быть дочерний элемент, дочерний элемент его дочернего элемента и т. д.).
• Общий селектор родственных элементов: Выбирает только первый элемент, если он следует за первым элементом и оба дочерних элемента относятся к одному и тому же родительскому элементу. Не обязательно, чтобы второй элемент следовал сразу за первым элементом.
  Синтаксис: Изменения в содержимом элемента span, который следует за тегом абзаца и оба имеют один и тот же родительский тег.

html

p ~ span {      цвет: красный; }

Example:

html

< html >     < head > < заголовок > заголовок >        < стиль Тип = "Текст/CSS" > P ~ SPAN { Color: красный;           }        style >     head >     < body >          < p >Coding is           < span >fun! span >        с > < H2 > Geeksforgeeks H2 > < P > Учите P > < SARN SARN SARN > 9. 9.9.9.9.9.9.9. 6.     body > html >

Output:

• Селектор элементов: Выбирает текст внутри указанного элемента.
  Синтаксис:

html

div {      background :9001; }   p {      цвет: желтый; }

Example:

html

< html >     < head >        < title >< / заголовок >        < стиль тип = "" текст/0cs0016           div {           фон:фиолетовый;           }           p { 5 9009 0; } . 0016 > < Body > < DIV > 9003 6 DIV > 9003 699999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999тели .             < p >Программирование — это весело!              GeeksforGeeks изучают последний тег span.           p >             div element is closing        div >     body > HTML >

Выход:

• ID SELECE0100 Выбирает изменения, внесенные в конкретный текст на странице, поскольку его можно использовать только один раз на странице.
  Синтаксис:

html

# special {      color: 9001; }

Example:

html

< html >     < head >        < title > title >        < style type = " text/css" >           #special {           цвет: синий;           }        style >     head >     < body >        < div >           Это внутри элемента div.             < P > Кодирование - это весело! P > < P > Это A ATARACH. < P ID = «Специальный» > Этот параграф со специалистами с «Специальным» ID.0002             div element is closing        div >     body > html >

Вывод:

• Селектор класса: Это то же самое, что и селектор ID, но его можно использовать несколько раз на странице.
  Синтаксис:

html

.highlight {      background : 900; }

Example:

html

< html >     < head > < Название > Название > < Стиль Тип = . выделить {           фон: желтый;           }           p {           фон: синий;           }        style >     head >     < body >        < p класс = "подсветка" > Это внутри подсветки p >            < p >This is normal paragraph. p >       body > HTML >

Выход:

• Star SELETER:
  • Star SELETER:
    • .0100 Сделанные изменения будут применены ко всей странице.
      Синтаксис:

    html

    *{      светло-серый; }

    Example:

    html

    < html >     < head > < Название > > < < < > > > > > .           *{           граница: 1 пиксель светло-серая сплошная;           }        style >     head >     < body >        < p class = "блик" > Это внутри блика p >         2129 < P > Это нормальный пункт.

    Вывод:

    • Селектор потомков: Вносит изменения только в те элементы, которые находятся внутри другого элемента.
      Синтаксис: Выберите все теги привязки, которые находятся внутри элемента «li», которые находятся внутри элемента «ul».

    html

    ul li a{      цвет: красный; }

    Example:

    html

    < html >     < head >        < title > title >        < style type = "text/css" >           ul li a{           цвет:красный;           }        style >     head >     < body >        < ul >        < li > Это внутри первого элемента li. li >        < li >Программирование — это весело! < LI > < LI > < A HRE > < A HRE > < A HRE > < A HRE > < A HRE > < A > A . чтобы перейти в Google. a > li >        < li >The last li. li >     body > html >

    Выход:
    

    • Все селекторы используются вместе в следующем примере:

    8

    9

    9999125

    9

    < html >     < head >        < title >nth title >        < Стиль Тип = "Текст/CSS" > #pecial { 0016 цвет:красный; } . Highlight { Фона: зеленый;           }           ul:nth-of-type(2){           background:yellow;           }           ul+h5{           граница: 4 пикселя сплошной фиолетовый; } a [href = "http://www.google.com"] { Форек: Желтый; Желтый; Желтый; } H2 ~ H5 { Цвет: красный;           }           div > span {           background-color: DodgerBlue;           }        style >     head >     < body >        < h2 >GeeksForGeeks h2 >        < ul >           < li >java li > < LI > Python LI > < LIT < LIT < LIT . 0016 >C++ li >        ul >        < ul >           < li > HTML LI > < LI > CSS LI > >0003           < li >PHP li >        ul >        < ul > < LI > C# LI > < LI 0015 >R li >           < li >Matlab li >        ul > < H5 > Кодирование H5 > < DIV > DIV > DIV > DIV > DIV > DIV > < DIV > . 2129 < SPAN > Внутренний Div и внутренний SPAN SPAN > < P . < span >внутри абзаца div span >           > < P Класс = ». > < P ID = «Специальный» > Внутренний Div, но не внешний SPAN " > Внутренний Div, но не внешний SPAN " > Внутренний Div, но не наружу, но не находится Span "0016 с ID -элементом. P > < P < P < P < P <. SPAN с другим элементом класса. P > DIV DIV DIV DIV 0016 > для Geeksforgeeks.com A > < A < A HRE . target = "_blank" >                    click here for google.com a >     body > html > Output:   Recommended Articles Page : Advanced Selectors В последних нескольких уроках были рассмотрены основные концепции CSS. В этом уроке мы начнем отходить от уже известного нам контента и приступим к изучению более продвинутой теории, начиная с продвинутых селекторов. Расширенные селекторы относятся к селекторам CSS, которые делают что-то более сложное, чем выбор тега, класса или идентификатора. Это включает в себя выбор типа тега внутри другого тега или выбор элемента с определенным идентификатором или классом, но только при наведении на него указателя мыши. Обязательное видео Расширенные селекторы Продолжая серию YouTube по основам CSS DevTips, посмотрите следующее видео о продвинутых селекторах CSS: Advanced Selectors Для справки, вот пример расширенных типов и форматов селекторов, обсуждаемых в видео: Selector Stacking Многоуровневый селектор выбирает несколько типов элементов. Элементы перечислены в той же строке, что и правило CSS, разделенные запятой, например: a, strong { красный цвет; } В этом примере все теги и будут окрашены в красный цвет. Селекторы стекирования помогают сохранить таблицы стилей СУХИМИ, применяя одинаковые стили к нескольким элементам в одном правиле. Селектор All/Universal Селектор all , также называемый универсальным селектором , обозначается символом * . Он выбирает все в HTML: * { маржа: 0; } Чаще всего используется для сброса стилей браузера по умолчанию. Например, в приведенном выше примере поле каждого элемента сбрасывается до 0 . Селектор потомков Список нескольких селекторов с пробелом между ними создает селектор потомков , например: li a { красный цвет; } Это правило сделает все тегов, которые являются потомками тегов, красным цветом. ли ли { красный цвет; } Во втором примере тегов, вложенных в тегов, которые являются , а также , вложенные в другой тегов красного цвета. Классы и идентификаторы элементов также могут использоваться в селекторах потомков. Например, это превратило бы детей 9 лет0015 s с акцентом class red: div .emphasis { красный цвет; } Обратите особое внимание на разницу между селекторами потомков и селекторами стека . Как видите, разделение двух селекторов пробелом и запятой приводит к совершенно разным результатам! Селектор прямого потомка Селектор прямого потомка выбирает дочерние элементы, вложенные в один слой глубоко внутри DOM. Обозначается цифрой > символ. Левая сторона символа содержит родителя, а правая сторона содержит прямого потомка, на которого мы ориентируемся, например: .container > ul { граница: 4 пикселя сплошного красного цвета; } Если бы это правило применялось к следующему HTML-коду, один имел бы красную рамку, а другой — нет, потому что только один является прямым потомком элемента div с контейнером класса : . .. <дел> // Этот будет иметь красную рамку, потому что он вложен непосредственно в // родитель с классом 'контейнер': <ул> Один Два Три // Этот второй *НЕ* будет иметь красную рамку, потому что это не напрямую // внутри div-контейнера: <ул> Красный Синий Зеленый ... Смежный селектор Смежный селектор , обозначенный символом + , изолирует элементы определенного типа, но только если они непосредственно следуют за другим определенным типом. Например, приведенное ниже правило сделает содержимое элементов красным, а — только , если они сразу следуют за : ul + p { красный цвет; } Sibling Combinator Мы можем использовать родственный комбинатор , добавив символ ~ между двумя элементами в селекторе, например: ul ~ p { красный цвет; } Будет выбран любой абзац после . Любой до не будет наследовать стиль. Обратите внимание, что он отличается от соседнего селектора тем, что ко всем тегам, следующим за , будет применен стиль, а не только к самому ближайшему. Псевдоклассы Псевдоклассы предназначены только для элементов, когда они находятся в определенном состоянии или взаимодействуют с ними определенным образом. Например, это правило будет применяться только к элементам, когда над ними находится курсор: a:hover { текстовое оформление: нет; } Знайте, как быстро распознать селектор псевдокласса, но пока не беспокойтесь об их использовании. Мы изучим их позже. Объединение нескольких расширенных селекторов Мы также можем использовать несколько расширенных селекторов в одном правиле. Проверьте это: .peeka:hover + .boo { дисплей: блок; } Мы используем соседний селектор с псевдоклассом . Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт