Содержание

Селекторы jQuery

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

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

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

Таблица 1. Селекторы jQuery
СелекторОписание, пример
ЭлементаВыбирает все элементы данного типа на странице, например, $("div").
Элемент1 элемент2Выбирает все элементы2, вложенные непосредственно в элемент1, например, $("p img").
КлассаВыбирает все элементы заданного класса, например, $(".sidebar").
ИдентификатораВыбирает элемент с указанным идентификатором, например, $("#main").
Элемент классВыбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, $("p.first").
ПотомкаВыбирает все указанные элементы выбранного селектора, например, $(".sidebar a").
ДочерниеВыбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, $("body > p"). =’http://’]»).
Выбирает все элементы, заканчивающиеся на определенное значение, например, $("a[href$='.pdf']").
Выбирает все элементы, содержащие в любом месте определенное значение, например, $("a[target*='blank']").
:evenВыбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, $("li:even").
:oddВыбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы.
:firstВыбирает только один элемент, первый из подходящих, например, $("p:first").
:lastВыбирает только один элемент, последний из подходящих.
:first-childВыбирает элементы, которые являются первыми дочерними элементами своих родителей.
:last-childВыбирает элементы, которые являются последними дочерними элементами своих родителей.
:only-childВыбирает элементы, являющиеся единственными дочерними элементами своих родителей.
:nth-child(n)Выбирает элементы, которые являются n-дочерними элементами своих родителей.
:nth-child(Xn+Y)Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках.
:nth-of-type(n)Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей.
:parentВыбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст.
:eq(n)Выбирает элементы с индексом n, при этом индексы отсчитываются от нуля.
:gt(n)Выбирает все элементы, индекс которых больше n, индексы отсчитываются от нуля.
:lt(n)Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент.
:not(селектор)Позволяет выбрать элемент, не соответствующий данному типу селектора, например, $("a:not(.link)"), $("a:not([href$='.pdf'])").
:has(селектор)Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: $("li:has(a)").
:contains(текст)Выбирает элементы, которые содержат указанный в скобках текст, например, $("a:contains(Скачать)").
:hiddenВыбирает скрытые элементы, для которых установлено значение display: none;, а также элементы форм со значением type="hidden" например, $("ul:hidden").show() — делает скрытые элементы видимыми.
:visibleВыбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением visibility: hidden и opacity: 0.
:activeВыбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши.
:checkedВыбирает только отмеченные флажки или радиокнопки.
:focusВыбирает элемент, находящийся в фокусе.
:hoverВыбирает элемент, на который наведен указатель мыши.
:disabledВыбирает неактивные элементы (форм).
:enabledВыбирает активные элементы (форм).
:emptyВыбирает элементы, не содержащие дочерних элементов.
:targetВыбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе.
:animatedВыбирает все анимируемые в данный момент элементы.
:buttonВыбирает все кнопки input[type=submit], input[type=reset], input[type=button], button.
:checkboxВыбирает элементы-флажки input[type=checkbox].
:fileВыбирает элементы типа file, input[type=file].
:headerВыбирает элементы-заголовки от h2 до h6.
:imageВыбирает изображения в элементах форм input[type=image].
:inputВыбирает элементы форм input, select, textarea, button.
:passwordВыбирает элементы ввода пароля input[type=password].
:radioВыбирает радиокнопки input[type=radio].
:resetВыбирает кнопки сброса input[type=reset], button[type=reset].
:selectedВыбирает выделенные элементы option.
:submitВыбирает кнопки отправки формы input[type=submit], button[type=submit].
:textВыбирает элементы ввода текстаinput[type=text].

Метод .children() возвращает набор jQuery, состоящий из всех прямых потомков каждого элемента исходного набора jQuery, дополнительно отфильтрованных с помощью входного параметра (селектора jQuery).


jQuery API    ( ru | en )

 

Синтаксис и описание:

  • Добавлено в jQuery 1.0.children( [expression] )

  • Метод .children() возвращает новый набор jQuery, состоящий из всех прямых потомков (не текстовых узлов) каждого элемента исходного набора jQuery. Для дополнительной фильтрации найденных дочерних элементов используется селектор, переданный во входном параметре expression.

Возвращаемое значение: (объект) Набор jQuery (вновь созданный набор).

Параметры:

  • expression – (строка ) Необязательный параметр — селектор jQuery, с помощью которого производится дополнительная фильтрация соответствующих элементов. Для включения в новый набор элементы должны соответствовать указанному селектору. Если данный параметр опущен, то выбираются все допустимые элементы.

  1. Примечание:

    Функция .children() возвращает новый набор jQuery, не изменяя первоначальный набор.

  2. Примечание:

    Функция .children() в отличие от .find(), фильтрует не сами элементы, а их детей и только на первом уровне вложенности.

Примеры:

  1. Найти всех прямых потомков (все дочерние узлы, кроме текстовых) элемента, кликнув на нем.

    Демонстрация примера:

[ наверх ]

 

Соседние селекторы | htmlbook.

ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

Описание

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

Синтаксис

E + F { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit. </p>
   <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Красный цвет текста для соседних селекторов

Браузеры

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).

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

  • Главная

  • ->

  • Материалы

  • ->

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

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

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

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

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

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

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

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

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

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

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

Начать->

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

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

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

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

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

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

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

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

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

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

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

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


Назад
Вперед

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

Итак, Вы разобрались с основными селекторами: 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 для какого-то элемента, чтобы сослаться на него?»

Селекторы 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

7. X + Y 


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. (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут 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-селектор :not. Полезные примеры

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

Например:

p:not(.classy) { color: red; }

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

Пример 1. Элемент без класса

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

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li {  }

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

Мы ограничиваем область действия селектора:

.content ul li {  }

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

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

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

.textlist li {  }

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

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li {  }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

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

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.


ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

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


ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.


img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}


ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

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

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

Введение в Chrome DevTools. Панель Elements — Блог HTML Academy

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

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

Как открыть инструменты разработчика

OS X — Ctrl+Cmd+I.

Windows — F12.

Linux — Ctrl+Shift+I.

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

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

Расположение панелей

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

Вкладка Elements

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

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

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

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

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

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

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

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

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

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

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

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style.

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

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

Начать обучение

Нажатие на кнопку — согласие на обработку персональных данных

FAQ / Методология / БЭМ

Возникли вопросы по БЭМ? Мы поможем быстро найти ответы.

Почему БЭМ?

Блоки и элементы

Модификаторы и миксы

CSS

JavaScript

  • Зачем нужен i-bem.js, если есть jQuery?

У меня другой вопрос

Если вы не нашли ответ на свой вопрос, свяжитесь с нами на форуме.

В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?

  • БЭМ работает не только с CSS, но и с JavaScript.

  • БЭМ больше схож с Web Components, чем с перечисленными решениями для CSS.

  • БЭМ предоставляет комплексное решение по созданию архитектуры проекта и помогает организовать процессы разработки.

    Подробнее читайте в разделе Применение методологии для решения задач веб-разработки.

В чем разница между БЭМ и Web Components?

Поддержка браузеров

  • Web Components не поддерживается в Safari, iOS Safari, Internet Explorer, Firefox.

  • БЭМ работает во всех браузерах.

Инкапсуляция

  • В Web Components реализована через Shadow DOM.

  • В БЭМ — с помощью элементов блока.

Работа шаблонов

  • В Web Components шаблоны всегда выполняются в браузере. Это может потребовать дополнительных решений проблем с индексацией.

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

  • Web Components использует императивный принцип — интерполяцию строк.

  • БЭМ использует декларативный подход, который позволяет гибко управлять шаблонизацией и избегать повторений.

Вместо импорта HTML — сборка

  • Web Components использует импорт HTML, который работает непосредственно в браузере. Для объединения HTML-файлов используется инструмент Vulcanize.

  • В БЭМ используется сборка. Для объединения файлов используются сборщики: ENB, Gulp.

Вместо Custom Elements — абстракция над DOM-деревом

  • В Web Components используются Custom Elements. Такой подход позволяет разместить на одном DOM-узле только один компонент.

  • В БЭМ используется БЭМ-дерево. Такой подход позволяет размещать на одном DOM-узле несколько компонентов (БЭМ-сущностей).

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

Полезен ли БЭМ в маленьких проектах?

Методология БЭМ предоставляет правила организации веб-проектов, независимо от их размера или количества разработчиков в команде. Даже если в вашей команде два человека и вы верстаете одностраничные сайты, БЭМ позволяет:

  • Повторно использовать верстку

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

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

  • Быстро прототипировать верстку

    • Прототип сайта создается из блоков. Вместо верстки в БЭМ-проекте вы сразу проектируете интерфейс из готовых блоков.

  • Ускорить разработку

    • Уровни переопределения позволяют подключать библиотеки и доопределять блоки, не зависеть от обновлений библиотеки.

    • БЭМ-проект можно быстро начать с шаблонного проекта project-stub или bem-express.

  • Не зависеть от конкретного разработчика

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

  • Ускорить рефакторинг

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

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

  • Ускорить и упростить смену дизайна за счет уровней переопределения.

  • Минифицировать CSS/JS даже в одностраничном проекте.

В чем разница между БЭМ и Bootstrap?

Bootstrap — это свободный набор сверстанных блоков для создания сайтов и веб-приложений.

БЭМ — это методология, позволяющая:

  • создавать архитектуру проекта;

  • разрабатывать веб-приложения независимыми блоками;

  • упрощать поддержку проектов.

Также существует ряд библиотек с открытым исходным кодом:

  • bem-components — библиотека блоков, содержащая контролы форм и другие базовые компоненты веб-интерфейса;

  • bem-core — библиотека блоков, предоставляющая специализированный JavaScript-фреймворк для веб-разработки.

  • bem-history — БЭМ-обертка над History API.

Когда создавать блок, когда — элемент?

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

Как изменить внешний вид блока?

Внешний вид блока можно изменить при помощи модификаторов или миксов.

Используйте модификаторы

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

Используйте миксы

Если блок имеет специфичное оформление только для данного окружения и не будет переиспользован на проекте.

Подробнее про применение миксов и модификаторов читайте в разделе Когда создавать модификатор, когда — микс?.

Зачем в именах модификаторов и элементов указывать имя блока?

Имя блока в именах модификаторов и элементов:

  • Обеспечивает пространство имен.

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

    Пример

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

  • Позволяет использовать миксы.

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

    Пример

    <div>...</div>

  • Облегчает поиск в коде.

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

Зачем создавать отдельные директории и файлы для каждого блока и технологии?

Для удобства разработки и поддержки проекта файловую структуру БЭМ-проекта разделяют на вложенные директории и файлы.

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

Наследуют ли элементы блока его CSS-свойства?

Да. Механизм наследования CSS-свойств в БЭМ ничем не отличается от привычного наследования.

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

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

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

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

Подробнее читайте в разделе HTML по БЭМ.

Почему не стоит создавать элементы элементов (block__elem1__elem2)?

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

Подробнее читайте в разделе Быстрый старт.

Когда создавать модификатор, когда — микс?

Создавайте модификатор

Если нужная вам реализация может использоваться повторно и не зависит от реализации других компонентов страницы. Например, блок select имеет модификаторы: hovered, pressed, disabled, focused, opened.

Создавайте микс

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

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

  • реализуется определенная бизнес-логика проекта;

  • задается внешняя геометрия для данного окружения.

Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?

Создавайте булевый модификатор

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

Пример

<div>...</div>

Создавайте модификатор вида «ключ-значение»

Если состояний у блока может быть несколько. Например, для описания размеров блока можно использовать модификатор size с допустимыми значениями s, m и l.

Пример

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

Как выбрать имя модификатора?

Выбирайте имена модификаторов, опираясь на семантику, а не на описываемые им CSS-свойства.

Пример

<button>...</button>

<button>...</button>

Имя модификатора button_background_yellow неудачное, потому что:

  • При изменении фона с желтого (yellow), например, на красный (red) придется менять не только CSS-код, но и название селектора, шаблоны и, вполне вероятно, JavaScript-код.

  • При добавлении других CSS-свойств, например, border, line-height, имя модификатора перестанет соответствовать его содержанию.

Как сделать глобальные модификаторы для блоков?

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

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

Подробнее читайте в разделе Стилизация групп блоков.

Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?

Элемент — составная часть блока, а не модификатора блока. Таким образом, только имя блока может задавать пространство имен для элементов.

Это важно, потому что:

  • Блок может иметь много модификаторов.

    Пример

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

  • Модификатор определяет состояние блока/элемента, которое может быть изменено во время выполнения скрипта JavaScript.

Как адаптировать сайт к различным устройствам?

Существует несколько способов изменять разметку страницы на основе ширины окна браузера:

  • используя Media Queries;

  • переключая модификаторы.

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

Media Queries

Файловая структура:

common.blocks/
    button/
        button.css    # CSS-реализация кнопки

CSS-реализация:

@media (max-width: 767px) {
    .button {
          left: 0;
    }
}

@media (max-width: 479px) {
    .button {
        right: 0;
    }
}

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

Переключение модификатора

Файловая структура:

common.blocks/
    button/
        _position/
            button_position_left.css
            button_position_right.css
        button.js                         # JS-реализация кнопки

button_position_left.css:

.button_position_left {
    left: 0;
}

button_position_right.css:

.button_position_right {
    right: 0;
}

Изменение CSS-классов на DOM-узле происходит при помощи JavaScript.

Подробнее читайте в разделе Переключение модификаторов.

Можно ли совмещать теги и классы в селекторе?

Совмещение тега и класса в селекторе повышает специфичность CSS-правил. Методология БЭМ не рекомендует совмещать теги и классы в селекторе.

Подробнее читайте в разделе Совмещение тега и класса в селекторе.

Можно ли использовать вложенные селекторы?

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

Подробнее читайте в разделе Вложенные селекторы.

Можно ли использовать комбинированные селекторы?

Комбинированные селекторы имеют более высокую специфичность CSS-правил, чем одиночные. Успешность переопределения таких селекторов сильно привязана к порядку их объявления. Методология БЭМ не рекомендует использовать комбинированные селекторы.

Подробнее читайте в разделе Комбинированные селекторы.

Можно ли использовать селекторы по пользовательским тегам?

В HTML блоки могут выражаться с помощью пользовательских HTML-элементов (Custom Elements) с целью:

  • улучшить структуру веб-страницы и добавить смысловое значение заключенному в них содержимому;

  • использовать селекторы по пользовательским тегам вместо селекторов по классам;

  • связать с HTML-элементом дополнительные данные, с которыми потом будет работать JavaScript.

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

Пример

HTML-реализация:

<icon-twitter>...</icon-twitter>

CSS-реализация:

icon-twitter {}
.icon_social_twitter {}

В таком подходе существует ряд ограничений:

  • невозможно использовать миксы;

  • не любой блок можно выразить пользовательским HTML-элементом. Например, для всех ссылок необходим тег <a>, а для полей — <input>.

Почему не стоит делать общий сброс стилей (reset)?

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

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

Почему не стоит писать block_mod вместо block block_mod?

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

Модификатор определяет состояние блока/элемента, которое может быть изменено во время выполнения скрипта JavaScript. Таким образом, копировать базовые CSS-свойства блока придется во все его модификаторы.

Пример

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

Примечание. Совмещение нескольких модификаторов на одном и том же DOM-узле приведет к дублированию кода, реализующего базовую функциональность (логику и стили) блока.

В каких случаях следует создавать вспомогательные блоки?

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

Примером вспомогательного блока в bem-core может служить блок clearfix, а в bem-components — z-index-group.

Зачем внешнюю геометрию и позиционирование задавать через родительский блок?

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

Подробнее читайте в разделе Внешняя геометрия и позиционирование

Зачем нужен i-bem.js, если есть jQuery?

i-bem.js не предназначен для замены фреймворка общего назначения, такого как jQuery.

i-bem.js позволяет:

  • разрабатывать веб-интерфейс в терминах блоков, элементов, модификаторов;

  • интегрировать JavaScript-код с шаблонами и CSS-правилами в стиле БЭМ;

  • описывать логику работы блока как набор состояний.

родитель | Cypress Documentation

Получить родительский элемент DOM набора элементов DOM.

Обратите внимание, что .parent () перемещается только на один уровень вверх по дереву DOM как
в отличие от команды .parents ().

Запросы этой команды точно соответствуют тому, как
.parent () работает в jQuery.

Синтаксис 

  .parent ()
.parent (селектор)
.parent (параметры)
.parent (селектор, параметры)

Использование

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

  лл.получить ('заголовок'). родитель ()

Неправильное использование 

  cy.parent ()
cy.reload (). parent ()

Аргументы

селектор (Селектор строки)

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

варианты (Объект)

Передайте объект параметров, чтобы изменить поведение по умолчанию для .parent () .

Урожайность

  • .родитель ()
    дает новые найденные элементы DOM.

Примеры

Нет аргументов

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

li 

  
    
  
  •  Обзор 
    • 
  
  • 
    Начиная
    
      
      
    •  Установить 
      • 
      
    •  Сборка 
      • 
      
    •  Тест 
      • 
    
    
  
    • 


  
 
cy.get ('li.active'). parent ()

Селектор

Получить родительский элемент с sub-nav класса

из всех элементов li 

  
    
  
  •  Обзор 
    • 
  
  • 
    Начиная
    
      
      
    •  Установить 
      • 
      
    •  Сборка 
      • 
      
    •  Тест 
      • 
    
    
  
    • 


  
 
cy.получить ('li'). parent ('. sub-nav')

Правила

Требования

  • .parent ()
    требует привязки к команде, которая дает DOM
    элемент (ы).

Утверждения

  • .parent ()
    будет автоматически

    повторить попытку
    пока элемент (ы)

    существуют в DOM

  • .parent ()

    будет автоматически
    повторить попытку
    пока все
    связанные утверждения прошли

Таймауты

  • .родитель ()
    может истечь время ожидания, пока элемент (ы)

    существуют в DOM
    .

  • .parent ()

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

Журнал команд

Утверждение родительского элемента активного li 

  cy.get ('li.active'). Parent (). Should ('иметь.class', 'nav')

Команды, указанные выше, будут отображаться в журнале команд как:

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

См. Также

Cheerio — npm

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

中文 文档 (китайский файл Readme)

 const cheerio = require ('cheerio');
const $ = cheerio.load ('
 Привет, мир 
');

$ ('h3.title'). text ('Привет!');
$ ('h3'). addClass ('добро пожаловать');

$ .html ();
// =>     
 Привет!

Примечание

В настоящее время мы работаем над выпуском Cheerio 1.0.0 в основной ветке . Исходный код последней опубликованной версии 0.22.0 , можно найти здесь.

Установка

npm установить cheerio

Возможности

❤ Знакомый синтаксис:
Cheerio реализует подмножество основного jQuery. Cheerio удаляет все несоответствия DOM и мусор браузера из библиотеки jQuery, раскрывая свой поистине великолепный API.

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

❁ Невероятно гибкий:
Cheerio использует синтаксический анализатор parse5 и при желании может использовать снисходительный htmlparser2 @ FB55. Cheerio может анализировать практически любой документ HTML или XML.

Cheerio — это не веб-браузер

Cheerio анализирует разметку и предоставляет API для просмотра / управления полученной структурой данных. Он не интерпретирует результат, как это делает веб-браузер. В частности, , а не , производит визуальный рендеринг, применяет CSS, загружает внешние ресурсы или выполняет JavaScript.Это делает Cheerio намного быстрее, чем другие решения . Если ваш вариант использования требует какой-либо из этих функций, вам следует рассмотреть такие проекты, как Puppeteer или JSDom.

API

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

 
    
  
  •  Apple 
    • 
  
  •  Оранжевый 
    • 
  
  •  Груша 
    •

Это разметка HTML, которую мы будем использовать во всех примерах API.

Загрузка

Сначала вам нужно загрузить HTML.Этот шаг в jQuery неявный, поскольку jQuery работает с одной встроенной DOM. В Cheerio нам нужно передать HTML-документ.

Это предпочтительный метод :

 // ES6 или TypeScript:
импортировать * как cheerio из 'cheerio';

// В других средах:
const cheerio = require ('cheerio');

const $ = cheerio.load ('
     ... 
');

$ .html ();
// =>     
     ...

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

 const $ = cheerio.load ('
     ... 
', ноль, ложь);

$ .html ();
// => '
     ... 
'

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

 $ ('ул', '
     ... 
');

Или как рут:

 $ ('ли', 'ул', '
     ... 
');

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

 const $ = cheerio.load ('
     ... 
', {
  xml: {
    normalizeWhitespace: истина,
  },
});

Параметры в объекте xml взяты непосредственно из htmlparser2, поэтому любые параметры, которые можно использовать в htmlparser2 , также действительны в Cheerio. Если задано xml , параметры по умолчанию:

 {
    xmlMode: правда,
    decodeEntities: true, // Декодируем объекты HTML.
    withStartIndices: false, // Добавляем свойство `startIndex` к узлам.withEndIndices: false, // Добавляем свойство `endIndex` к узлам.
}

Полный список опций и их эффектов см. В domhandler и
Параметры htmlparser2.

Некоторые пользователи могут захотеть проанализировать разметку с помощью библиотеки htmlparser2 , и
перемещать / изменять получившуюся структуру с помощью Cheerio. Это может быть так
для тех, кто обновлялся с выпусков Cheerio до 1.0 (которые полагались на
htmlparser2 ), для тех, кто имеет дело с недопустимой разметкой (потому что htmlparser2 является
более снисходительный), или для тех, кто работает в критических для производительности ситуациях
(потому что htmlparser2 может быть быстрее в некоторых случаях).Обратите внимание, что «более снисходительный»
означает, что htmlparser2 имеет механизмы исправления ошибок, которые не всегда совпадают
для стандартов, соблюдаемых веб-браузерами. Такое поведение может быть полезно, когда
анализ содержимого не HTML.

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

 // Использование с htmlparser2 версии 6:
const htmlparser2 = требуется ('htmlparser2');
const dom = htmlparser2.parseDocument (документ, параметры);

const $ = cheerio.load (дом);

Селекторы

Реализация селектора

Cheerio почти идентична реализации jQuery, поэтому API очень похож.

$ (селектор, [контекст], [корень])

Селектор выполняет поиск в пределах контекста области, которая ищет в пределах корневой области . Селектор и контекст может быть строковым выражением, элементом DOM, массивом элементов DOM или объектом cheerio. корень — это обычно строка документа HTML.

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

 $ ('. Яблоко', '# фрукты'). Текст ();
// => Яблоко

$ ('ul .pear'). attr ('класс');
// => груша

$ ('ли [класс = оранжевый]'). html ();
// => Оранжевый
Пространства имен XML

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

Визуализация

Когда вы будете готовы визуализировать документ, вы можете вызвать метод html для «корневого» выбора:

 $ .root (). Html ();
// => 
//  
// <тело>
// 
    
// 
  •  Яблоко 
    • 
// 
  •  Оранжевый 
    • 
// 
  •  Груша 
    • 
// 

// 
//

Если вы хотите отобразить externalHTML выделения, вы можете использовать служебную функцию html :

 cheerio.html ($ ('. груша'));
// => 
  •  Груша 
    •

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

     const $ = cheerio.load (
  ''
);

    … и позже хотите выполнить рендеринг в XML. Для этого вы можете использовать служебную функцию xml:

     $ .xml ();
// =>

    Вы также можете визуализировать текстовое содержимое объекта Cheerio, используя статический метод text :

     const $ = cheerio.load ('Это  контент .');
cheerio.text ($ ('тело'));
// => Это контент.

    Плагины

    После загрузки документа вы можете расширить прототип или эквивалентное свойство fn с помощью пользовательских методов плагина:

     const $ = cheerio.load ('  Привет,  мир !  ');
$.prototype.logHtml = function () {
  console.log (this.html ());
};

$ ('тело'). logHtml (); // регистрирует "Привет,  мир !" к консоли

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

     declare module 'cheerio' {
  interface Cheerio  {
    logHtml (это: Cheerio ): void;
  }
}

    Объект «Узел DOM»

    Коллекции Cheerio состоят из объектов, которые имеют некоторое сходство с узлами DOM на основе браузера.Вы можете ожидать, что они определят следующие свойства:

    • tagName
    • родительский узел
    • предыдущие
    • следующий
    • узел Значение
    • первый ребенок
    • дочерние узлы
    • lastChild

    Скринкасты

    Это видео-руководство является продолжением статьи Nettut «Как очищать веб-страницы с помощью Node.js и jQuery ", используя cheerio вместо JSDOM + jQuery. Это видео показывает, насколько легко использовать cheerio и насколько Cheerio быстрее, чем JSDOM + jQuery.

    Cheerio в реальном мире

    Используете ли вы Cheerio в производстве? Добавьте его в вики!

    Спонсоры

    Использует ли ваша компания Cheerio в производстве? Пожалуйста, рассмотрите возможность спонсирования этого проекта! Ваша помощь позволит сопровождающим уделять больше времени и ресурсов его развитию и поддержке.

    Сторонники

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

    Особая благодарность

    Эта библиотека стоит на плечах замечательных разработчиков. Особая благодарность:

    • @ FB55 для node-htmlparser2 и CSS Выберите:
    Феликс умеет писать быстрые движки синтаксического анализа. Он полностью переписал как node-htmlparser     @ tautologistic, так и node-soupselect     @harry с нуля, сделав их намного быстрее и гибче. Cheerio был бы невозможен без его фундаментальной работы

    .

    • Команда @jQuery для jQuery:
    Ядро API является лучшим в своем классе, и, несмотря на устранение всех несоответствий браузера, база кода чрезвычайно чиста и проста в использовании.Большая часть реализации и документации Cheerio взята из jQuery. Спасибо ребята.

    • @visionmedia:
    Стиль, структура, «открытость» этой библиотеки проистекают из изучения стиля TJ и использования многих из его библиотек. Этот чувак постоянно выпускает высококачественные библиотеки и всегда был более чем готов помочь или ответить на вопросы. Ты качаешь Ти Джея.

    Лицензия

    MIT

    Внешний вид | Select2 — замена jQuery для полей выбора

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

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

    Ширина контейнера

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

    Значение Описание
    'элемент' Использует вычисленную ширину элемента из любых применимых правил CSS.
    «стиль» Ширина определяется из атрибута style элемента select .Если атрибут стиля не найден, в качестве ширины возвращается значение null.
    «разрешение» Использует значение атрибута стиля , если доступно, при необходимости возвращаясь к вычисленной ширине элемента.
    '<значение>' Допустимые значения CSS могут быть переданы в виде строки (например, ширина : '80% ').

    Пример

    Два блока Select2 ниже имеют стиль 50% и 75% ширины соответственно для поддержки адаптивного дизайна:

      
  
     
    
 
    
 
    
 
    
 
     Select2 сделает все возможное, чтобы разрешить процентную ширину, указанную через класс CSS, но это не всегда возможно.Лучший способ убедиться, что Select2 использует процентную ширину, - это встроить объявление  стиля  в тег. 
    
 
    
 
    
 
    
 
    
 
     Темы 
    
 
     Select2 поддерживает настраиваемые темы с использованием опции  theme , поэтому вы можете стилизовать Select2 в соответствии с остальной частью вашего приложения. 
    
 
     В этих примерах используется тема  classic , которая соответствует старому внешнему виду Select2. 
    

 
     
     Можно изменить различные параметры отображения компонента Select2.Вы можете получить доступ к элементу   (или   ) и любым атрибутам этих элементов, используя  .element . 
    

 
     Нокаут: контекст привязки 
    


     Контекст привязки   - это объект, содержащий данные, на которые вы можете ссылаться из своих привязок. При применении привязок Knockout автоматически создает иерархию контекстов привязки и управляет ею. Корневой уровень иерархии относится к параметру  viewModel , который вы указали для  ko.applyBindings (viewModel) . Затем каждый раз, когда вы используете привязку потока управления, такую ​​как  с  или  для каждого , создается дочерний контекст привязки, который ссылается на данные модели вложенного представления. 
    

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

 
       
    • 
     
        $ родитель  
      

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

     
        
       
      

 
      
     
       - это
     менеджер  
 
      
        
    •   $ родители 
       Это массив, представляющий все родительские модели представления:
        $ parent [0]  - это модель представления из родительского контекста (т.е.е., это то же самое, что  $ родительский )
        $ Родители [1]  - модель представления из контекста дедушки и бабушки
        $ Родители [2]  - модель представления из контекста прародителя
      … и так далее.
    •   $ корень 
       Это основной объект модели представления в корневом контексте, то есть самый верхний родительский контекст. Обычно это объект, переданный в  ko.applyBindings .Это эквивалентно  $ родителям [$ parent.length - 1] .
    •   $ компонент 
       Если вы находитесь в контексте определенного шаблона компонента, то  $ компонент  относится к модели представления для этого компонента. Это компонентный эквивалент  $ root . В случае вложенных компонентов  $ component  относится к модели представления для ближайшего компонента.
       Это полезно, например, если шаблон компонента включает в себя один или несколько блоков  foreach , в которых вы хотите ссылаться на какое-либо свойство или функцию в модели представления компонента, а не на текущий элемент данных.
    •   $ данные 
       Это объект модели представления в текущем контексте. В корневом контексте  $ data  и  $ root  эквивалентны. Внутри вложенного контекста привязки этот параметр будет установлен на текущий элемент данных (например, внутри  с привязкой: person ,  $ data  будет установлено на  person ).  $ data  полезно, когда вы хотите сослаться на саму модель представления, а не на свойство модели представления.Пример:
        
        
     
      •  Значение:   
        • 
 
      
        
    •   $ index  (доступно только в пределах  для каждого  привязок)
       Отсчитываемый от нуля индекс текущей записи массива, визуализируемой привязкой  foreach . В отличие от других свойств контекста привязки,  $ index  является наблюдаемым и обновляется при изменении индекса элемента (например,g., если элементы добавляются или удаляются из массива).
    •   $ parentContext 
       Это относится к объекту контекста привязки на родительском уровне. Это отличается от  $ parent , который ссылается на данные   (не привязанный контекст) на родительском уровне. Это полезно, например, если вам нужно получить доступ к значению индекса внешнего элемента  foreach  из внутреннего контекста (использование:  $ parentContext. $ Index ).Это не определено в корневом контексте.
    •   $ rawData 
       Это исходное значение модели представления в текущем контексте. Обычно это будет то же самое, что и  $ data , но если модель представления, предоставленная Knockout, обернута в наблюдаемое,  $ data  будет развернутой моделью представления, а  $ rawData  будет самой наблюдаемой.
    •   $ componentTemplateNodes 
       Если вы находитесь в контексте определенного шаблона компонента, тогда  $ componentTemplateNodes  - это массив, содержащий все узлы DOM, которые были переданы этому компоненту.Это упрощает создание компонентов, которые получают шаблоны, например компонент сетки, который принимает шаблон для определения своих выходных строк. Полный пример см. В разделе «Передача разметки в компоненты».
     Следующие специальные переменные также доступны в привязках, но не являются частью объекта контекста привязки:
    •   $ контекст 
       Это относится к текущему объекту контекста привязки. Это может быть полезно, если вы хотите получить доступ к свойствам контекста, когда они также могут существовать в модели представления, или если вы хотите передать объект контекста вспомогательной функции в вашей модели представления.
    •   $ элемент 
       Это объект DOM элемента (для виртуальных элементов это будет объект DOM комментария) текущей привязки. Это может быть полезно, если привязке требуется доступ к атрибуту текущего элемента. Пример:
        
       
      
        
     Управление или изменение контекста привязки в пользовательских привязках 
     Так же, как встроенные привязки  с  и  для каждого , пользовательские привязки могут изменять контекст привязки для своих дочерних элементов или предоставлять специальные свойства путем расширения объекта контекста привязки.