Skip to content

Using CSS Selectors In Javascript

Published: at 04:07 PM

In CSS, selectors are patterns used to select the element(s) you want to style, but as you can tell from the title above, selectors are also useful in javascript and below are some examples on how to use them.

Basics

Using a selector in javascript

const div = document.querySelector("div") // => First occurence of a div element in the document

const p = div.querySelector("p") // => First occurence of a p element in the div
document.querySelectorAll("div") // NodeList of all div elements

By IDs

To get an element by its ID, use a # before the element ID

document.querySelector("#id") // => document.getElementById('id')

By classes

To get elements by class, use a . before the class name

document.querySelectorAll(".myElementClass")

By tag name

To get elements by tag name, just input the tag name

document.querySelectorAll("body") // => document.getElementsByTagName('body')

Replicating .getElementById and getElementsByTagName

document.querySelector("#myDivId") // => document.getElementById('myDivId')
document.querySelectorAll("a") // => document.getElementsByTagName('a')

All elements

To get all elements use *

document.querySelectorAll("*") // => NodeList[...]

Using multiple selectors

To use multiple selectors, we seperate each of them with a ,.

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelectorAll("p, a") // => NodeList[p,a,a]

More with elements

In the above examples, we made basic queries, but other things can be done like getting elements by order or parent.

Getting element children

There are two variants of this, one gets an element’s child no matter how deep it is down the tree, and the other gets an element’s direct child.

<html>
    <body>
        <p>Hello i am a paragraph</p>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <p>
                Hello i am a paragraph and here's
                <a href="https://anotherplace.com">a link</a>
            </p>
        </div>
    </body>
</html>

With the above HTML as an example, we will look at these two variants.

document.querySelector("div > a") // => <a href="https://awesomeplace.com">Hey I am a link</a>
document.querySelectorAll("div a") // => NodeList[a,a]

Getting elements by order

There are two ways to do this also. Consider the following HTML.

<html>
    <body>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <pre>I should intervene but i wont</pre>
            <p>Hello i am another paragraph</p>
        </div>
        <p>Hello i am a paragraph</p>
    </body>
</html>
document.querySelector("div + p") // => <p>Hello i am a paragraph</p>

With ~, it does not matter the element immediately behind matches.

document.querySelector("a ~ p") // => <p>Hello i am another paragraph</p>

and we can see that the pre element did not affect the result because it does not matter if the pre was there in the first place. But the following selector will fail because it checks the element immediately above it.

document.querySelector("a + p") // => null

Getting elements by attribute

An attribute selector starts with [ and ends with ] and is used as such

<html>
    <body>
        <p style="color:blue;">Hello i am styled</p>
        <p>Hello i have no style</p>
    </body>
</html>
document.querySelector("p[style]") // => <p style="color:blue;">Hello i am styled</p>

Check attribute value

To check an attribute value we use the = symbol.

<html>
    <body>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector('a[href="https://awesomeplace.com"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>

More with attribute values

document.querySelector('a[href^="https://awesome"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>
document.querySelectorAll('a[href$=".com"]') // => NodeList[a,a]
document.querySelectorAll('a[href*="place"]') // => NodeList[a,a]

Advanced selectors

This selects the element that currently has focus

This is used with a tags and selects links that have been visited

This is also used with a tags but in this case, selects links that have not been visited

This selects elements that are enabled(not disabled)

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>
document.querySelectorAll(":enabled") // => NodeList[p,p,a,a]

This selects elements that have been disabled

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>
document.querySelector(":disabled") // => <button disabled="true"> I have been disabled </button>

This selects the element that is the first child of its parent

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("p:first-child") // => <p>I am a paragraph</p>

This selects the element that is the last child of its parent

<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("p:last-child") // => <a href="anotherplace.com">I am another link</a>

This selects the element that is the first child of its parent and is the same type as el

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("a:first-of-type") // => <a href="https://awesomeplace.com">Hey I am a link</a>

This selects the element that is the last child of its parent and is the same type as el

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("p:last-of-type") // => <p>I am another paragraph</p>

This selects elements that don’t match the selector

<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector(":not(a)") // => <p>I am a paragraph</p>

This selects the element that is the n th child of its parent.

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>
document.querySelector("div:nth-child(2)") // => <a href="https://awesomeplace.com">Hey I am a link</a>

This selects the element that is the n th to the last child of its parent.

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>
document.querySelector("div:nth-last-child(1)") // => <a href="https://anotherplace.com">I am another link</a>

Mix and match

These selectors can be mixed together to perform some complex checks. e.g

<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>
document.querySelector('button.btn:disabled') // => <button disabled="true" class="btn">I am also disabled</button>
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button disabled="true">I am disabled</button>
        <button disabled="true" class="btn">I am also disabled</button>
    </body>
</html>
document.querySelector('form > button:disabled') // => <button disabled="true">Clear inputs</button>
<html>
    <body>
        <form method="POST">
            <input type="text" name="firstname" placeholder="firstname"/>
            <input type="text" name="lastname" placeholder="lastname"/>
            <button disabled="true">Clear inputs</button>
            <button type="submit">Submit</button>
        </form>
        <button>I am not disabled</button>
        <button class="btn">I am also not disabled</button>
    </body>
</html>
document.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]
<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
        <a href="/otherpage.html">I will to the other pages</a>
    </body>
</html>
document.querySelectorAll('a[href^="https://"]') // => NodeList[a,a]

And to get links that are not to external pages, use

document.querySelector('a:not([href^="https://"])') // => <a href="/otherpage.html">I will to the other pages</a>

Conclusion

These are just some of the ways you can use selectors in javascript and if you want to know more, here is a link to a CSS selector reference on w3c.

Thanks for reading!!!