JAVASCRIPT

js select element by css selector

// First Element:
document.querySelector('.class')

// Multiple Elements:
document.querySelectorAll('.class')

Select HTML elements by CSS selectors

const elements = document.querySelectorAll("div.article > h1");

selectors in css

/*Advanced selectors*/
    h2 + p  /*every paragraph that is after "h2" */
    textarea ~ button /*every button that is aftrer textarea with same parent (<form> is the same parent in this example)*/
    ul > li /*every signle "li" inside of the "ul"*/
    ul li /*every "li" that goes up to "ul"*/

/*Attribute selectors*/
    p[class="review"] /*all of paragraphs with review class on them*/
    img[href^="../my code guide/"] /*every image that starts with that addres (replacing "=" with"^=")*/
    img[href$="../my code guide/"] /* its end with this attribute*/
    img[href*="../my code guide/"] /*if its contain anywhere*/
    h1[class~="site-header"] /*only works with white space seperator*/
    h1[class|="subtitle"] /*selects ones that starts with "subtitle" or "subtitle" and "-" in following*/

selectors in css

/*Advanced selectors*/
    h2 + p  /*every paragraph that is after "h2" */
    textarea ~ button /*every button that is aftrer textarea with same parent (<form> is the same parent in this example)*/
    ul > li /*every signle "li" inside of the "ul"*/
    ul li /*every "li" that goes up to "ul"*/

/*Attribute selectors*/
    p[class="review"] /*all of paragraphs with review class on them*/
    img[href^="../my code guide/"] /*every image that starts with that addres (replacing "=" with"^=")*/
    img[href$="../my code guide/"] /* its end with this attribute*/
    img[href*="../my code guide/"] /*if its contain anywhere*/
    h1[class~="site-header"] /*only works with white space seperator*/
    h1[class|="subtitle"] /*selects ones that start with "subtitle" or "subtitle" and "-" in following*/

element selector css

//Selects all elements with the specified element name.
p {
  color: blue;
}