Table of contents
  1. CSS Selectors: Attribute Selectors
  2. get child
  3. siblings example all <a> that follow <p> immediately or not
  4. immediate siblings
  5. sudo elements
  6. multiple items
  7. html attribute
  8. css pseudo class
  9. descendants
  10. all table cells not right align
  11. every other tr starting with first
  12. multi select
  13. input



CSS Selectors: Attribute Selectors

get child

let listItems = document.querySelectorAll("ul.nav > li");

siblings example all <a> that follow <p> immediately or not

let links = document.querySelectorAll("p ~ a");

immediate siblings

let links = document.querySelectorAll("h1 + a");

sudo elements

// second li element in list
let listItem = document.querySelectorAll("li:nth-child(2)");

//first line of all divs
let links = document.querySelector("p::first-line");

multiple items

document.querySelectorAll("div, span");

html attribute

document.querySelectorAll('[data-example="test"]');

css pseudo class

document.querySelectorAll(":nth-child(4n)");

descendants

document.querySelectorAll("#test li");

all table cells not right align

document.querySelectorAll("tbody td:not(.MuiTableCell - alignRight )");

every other tr starting with first

querySelectorAll("tr:nth - of - type(2n + 1)");

multi select

querySelectorAll(`tbody td:nth-child(1), tfoot  tr:first-child > td`);

input

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>;
//Replace $$ with document.querySelectorAll in the examples:

const $$ = document.querySelectorAll.bind(document);

$$("input"); //Every input
$$("[id]"); //Every element with id
$$('[id="c2"]'); //Every element with id="c2"
$$("input,[id]"); //Every input + every element with id
$$("input[id]"); //Every input including id
$$('input[id="c2"]'); //Every input including id="c2"
$$("input#c2"); //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]'); //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]'); //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]'); //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]'); //Every input including id="c2" and value has conten

//Use the examples above directly, without the need for additional library,

//Some additions:

$$("."); //The same as $([class])
$$(div > input); //div is parent tag to input
document.querySelector(); //equals to $$()[0] or $()