CSS selector with element between two classes

Want to know what jQuery selector to use for selecting with class "bar" ONLY if it is under a button element (no class) which in turn, is under a div with class "foo"

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

".foo button.bar" doesn't work

EDITED: Thanks for all the solutions, tried the solution but for some reason the following gets selected too:

<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>

My intention is to handle click on <i> with dashicons-edit class ONLY if it is under div with mce-first. In the above example, "mce-first" is on a sibling div.

Answers 1

  • You can use find to check if there are so many target elements inside foo.

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

Related Articles