Selector jquery not: :not() Selector | jQuery API Documentation

Чтобы еще больше усложнить ситуацию, если вы используете метод JavaScript querySelectorAll (который принимает на вход селектор CSS), вы получите совершенно другой результат.

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

У меня нет объяснения другому поведению. Однако я могу рассказать вам, как этого избежать. Вот мои правила:

1. Никогда не используйте идентификаторы. Вместо этого используйте атрибуты класса .
2. Если мне нужно использовать идентификатор, задайте его пространство имен таким образом, чтобы он был уникальным, даже если на странице существует похожий элемент; например пункт меню-01

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

Таким образом, если у меня есть две формы на одной странице (скажем, user-signup и user-signin ), они гарантированно будут иметь уникальные идентификаторы. Даже если поля userID одинаковы между формами.

Иногда одного селектора недостаточно. Иногда вам нужно получить каждый div с именем класса section . В других случаях вам понадобится каждый элемент с именем класса section , который является дочерним элементом для div с ID user-signup . Есть много других возможных комбинаций селекторов.

В этом разделе вы узнаете три способа комбинирования селекторов, и я уверен, что они подойдут 90% ваших потребностей. Если вы обнаружите, что более 11% ваших потребностей не удовлетворены, приходите и жалуйтесь мне, и я отредактирую это, чтобы сказать, что 89% ваших потребностей :).

Как и прежде, начнем с CodePen:

Комбинирование селекторов для одного элемента

Хорошо, сначала рассмотрим комбинирование селекторов для одного элемента. Это означает выбор элемента с именем тега x , И именем класса y , И ID z . Конечно, вам не нужны все три, но вы можете совместить все три.

Допустим, мы хотим выбрать все div с классом item . Для этого мы объединяем два: div.item . Он идет от наиболее общего к наиболее частному слева направо. Это выбирает все теги div , которые ТАКЖЕ имеют имя класса item . Важно отметить, что между div и .item нет пробела . Добавление пробела меняет селектор полностью на , о чем я расскажу в следующем разделе.

Если вы раскомментируете соответствующий CSS, вы увидите, что раздел с именем класса элемент не стал красным. Это потому, что это не тег div .

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

Но, просто для четности, вот пример выбора div с классом item и ID other : div.item#other . Опять же, двигаясь слева направо, от самого общего к более конкретному.

Скорее всего, вы будете использовать этот синтаксис для выбора элемента, который имеет несколько классов. Для этого просто разделите все классы точками. Чтобы выбрать все элементы, которые имеют ОБА класса элемент и раздел , вы должны использовать .item.section . Порядок не имеет значения, когда вы делаете это таким образом, поэтому .section.item тоже подойдет.

Этот трюк позволит вам быть более конкретным в ваших селекторах.

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

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

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

Во-вторых, вы можете выбрать непосредственных дочерних элементов определенного элемента, используя > . «Непосредственный потомок» элемента — это тот, который имеет только один уровень глубины. В примере есть два элемента .item , содержащиеся в элементе #other , но один из элементов .item заключен в элемент .wrapper , так что он равен 9.0011, а не непосредственный дочерний элемент.

Для наглядности: если свернуть все под элементом #other , вы увидите следующее:

Эти двое являются единственными прямыми дочерними элементами #other элемента. Чтобы выбрать только прямой дочерний элемент .item из #other , вы должны использовать #other > .item , который выберет прямой дочерний элемент, но , а не тот, что находится под .wrapper . Круто, да?

1. Как бы вы выбрали все теги абзаца, принадлежащие элементам раздела ? (подсказка: теги абзаца p )
2. Как бы вы выбрали все элементы с классом button-text , которые являются потомками элементов с классом button ?
3. Как бы вы выбрали элемент с классом form-input , который является прямым дочерним элементом формы элементов?
4. Дополнительный вопрос : объясните, что выбирает этот селектор: header. title > form.user-signup button.button-danger

Как и прежде, не стесняйтесь делиться своими ответами в комментариях!

Собираем все вместе — буквально

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

Например, вы можете выбрать все .item , которые являются потомками div с классом parent-item с помощью div.parent-item .item . Вау!

Вы также можете выбрать прямых потомков. Например, чтобы выбрать все div с классом item , которые являются прямыми потомками div с классом parent-item : div.parent-item > div.item .

И, наконец, просто чтобы пошалить, вы можете пройтись по всему дереву DOM: div.parent-item .coolest-item .item . класс элемента , дочерний по отношению к самый крутой элемент класс, который является дочерним по отношению к div с классом родительского элемента .

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

Вы можете использовать Chrome DevTools, чтобы получить селектор любого элемента, который вы можете выбрать в DOM. Вот как:

1. Откройте Chrome DevTools. Поскольку вы выбираете элемент, щелкните правой кнопкой мыши элемент, который хотите выбрать, и нажмите «Проверить»:

2. Щелкните правой кнопкой мыши элемент DOM, который вы хотите выбрать. и наведите указатель мыши на «Копировать», затем нажмите «Селектор копирования:»

3. Готово! Между прочим, я скопировал селектор #editor_93 > section > div. section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailing.is -выбрано . Вы можете скопировать селектор в document.querySelector или jQuery и получить элемент.

Надеюсь, эта запись была полезной! Если вам понравилось, пожалуйста, похлопайте мне, чтобы больше людей увидело это. Спасибо!

Краткое руководство по селекторам CSS и jQuery для Web Scraper

Селекторы, когда речь идет о CSS и jQuery, относятся к коду, который можно использовать для взаимодействия с определенными элементами в модели DOM. Они особенно полезны, когда вы хотите стилизовать или воздействовать на определенные элементы документа, не изменяя другие элементы. Благодаря тщательному использованию селекторов вы можете манипулировать страницей точно так, как задумано, или изолировать определенные данные, которые вы хотите очистить.

Чтобы извлечь максимальную пользу из этой статьи, вам потребуются хотя бы базовые знания HTML и DOM. Кроме того, вам понадобится небольшой опыт работы с CSS и jQuery. Мы покажем, как использовать селекторы в контексте инструмента Web Scraper Chrome, поэтому это расширение может упростить этот процесс, а также помочь вам следовать руководству.

В этой статье мы рассмотрим 19 наиболее важных селекторов CSS, а также n-е дочерние селекторы и селекторы n-го типа. После этого мы рассмотрим несколько селекторов jQuery, сосредоточившись в основном на том, как вы можете связать их в цепочку, например операторы if-then. Для всех этих примеров селекторов мы будем изолировать элементы на домашней странице webscraper.io.

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

Селектор класса выбирает все элементы, относящиеся к указанному классу. Например, .under-hero__content класс выбирает все элементы с этим классом, найденные на странице:

Селектор класса может быть расширен для включения второго атрибута класса, когда более чем один описывает элемент. В этом примере мы выбираем определенные блоки текста, ссылаясь на два элемента home-cta__title и home-cta__title–testi :

image