Dear1ofGdBear Dear1ofGdBear - 5 months ago 11
CSS Question

Using CSS Selectors to grab element which meets mutilple :not "conditions"

I am looking to grab any element from the DOM that meets 2 basic conditions using the

:not
pseudo-class.

Here is my line of code:

document.querySelectorAll('textarea:not([id*=xyz]):not([style*=hidden])')


So I want to get any text area that:


  1. as an id that does not contain 'xyx' and

  2. does not have 'hidden' in the inline styles.



It seems that this grabs on an "or" basis as opposed to an "and" basis.

For example, it wont grab an element with an id of 'xyz' which does not have 'hidden' in the inline styles since it met the earlier criteria.

Answer

You should use a group of selectors to achieve this instead of chaining the :not.

From question:

So I want to get any text area that:

  • as an id that does not contain 'xyx' and
  • does not have 'hidden' in the inline styles.

In the snippet provided below,

  • First element doesn't have an id that contains xyz and doesn't have hidden in inline style.
  • Second element has an id that contains xyz but doesn't have hidden in inline style.
  • Third element has an id that contains xyz and had hidden inline style.
  • Fourth element has an id that contains xyz but doesn't have hidden in inline style.
  • Fifth element has an id that contains xyz but doesn't have hidden in inline style.

textarea:not([id*=xyz]), textarea:not([style*=hidden]) {
  outline: 1px solid red;
  }
<textarea rows='5' cols='5'></textarea>
<textarea rows='5' cols='5' id='123-xyz'></textarea>
<textarea rows='5' cols='5' id='123-xyz' style='property: hidden'></textarea>
<textarea rows='5' cols='5' id='abc' style='property: hidden'></textarea>
<textarea rows='5' cols='5' id='xyz' style='property: hiden'></textarea>

Comments