Селектор CSS с элементом между двумя классами

Question

Хотите знать, какой селектор jQuery использовать для выбора с классом «bar» ТОЛЬКО, если он находится под элементом кнопки (без класса), который, в свою очередь, находится под div с классом «foo»,

<div class="foo"> 
    <button> 
    <i class="bar">X</i> 
... 

".foo button.bar" не работает

Редакция: Спасибо за все решения, попробовал решение, но по какой-то причине следующим получает выбрано слишком:

<div id="mceu_36" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_36" role="button" aria-label="Align left"> 
    <button role="presentation" type="button" tabindex="-1"> 
    <i class="mce-ico mce-i-dashicon dashicons-align-left"></i> 
    </button> 
</div> 
... 
<div id="mceu_40" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_40" role="button" aria-label="Edit "> 
    <button role="presentation" type="button" tabindex="-1"> 
    <i class="mce-ico mce-i-dashicon dashicons-edit"></i> 
    </button> 
</div> 

Моя интуиция ntion обрабатывает нажатие на <i> с классом dashicons-edit ТОЛЬКО, если он находится под div с mce-first. В приведенном выше примере «mce-first» находится на div div.

Answer 1

Для выполнения явно с вашими требованиями:

• выбирающих <i> с классом «бар»
• ТОЛЬКО, если он не находится под кнопкой элемент (не класс)
• , который, в свою очередь, находится под DIV с классом "Foo"

Вы хотите, этот селектор

div.foo > button:not([class]) > i.bar 

В синтаксисе синтаксиса пробел указывает любой уровень ниже в иерархии DOM. Оператор > указывает на прямой ребенок.

Если вы не обязательно хотят выбор прямого ребенка, просто используйте пробелы

div.foo button:not([class]) i.bar 

Если вы не особенно заинтересованы в элементах (кроме <button>) и не важно, что классы могут или не может быть на <button>, просто используйте

.foo button .bar 

---

Ваш селектор .foo button.bar искал <button> с классом bar, который находился на любом уровне ниже элемента с классом foo.

Answer 2

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

$('.foo').find('button .bar'); 

Answer 3

".foo button.bar" не работает

button.bar значит кнопка элемент имеет класс bar

HTML, посмотреть, как это

<div class="foo"> 
    <button class="bar"> 
    <i class="bar">X</i> 

Correct : .foo button .bar