javascriptselectors-api

querySelector() combine multiple attribute selectors

I have a input field with class of this format:

some_starting_constant_string somevariablestring some_ending_constant_string

So I want a querySelector that uses a combination of starts with and ends with:

document.querySelectorAll("input[class^='some_starting_constant_string' AND class$='some_ending_constant_string']

Is this possible? Combining a starts with and ends with rule?

Solution

  • You just have to separate both attribute selectors :

    input[class^='some_starting_constant_string'][class$='some_ending_constant_string']

    console.log(
  document.querySelectorAll("[class^='start'][class$='end']")
)
    <div class="start__end"></div>
<div class="start_heretoo_end"></div>
<div class="sta__end"></div>
<div class="rt__end"></div>
<div class="start__d"></div>