{
"$type": "site.standard.document",
"content": "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.\r\n\r\n### Basics\r\n\r\n#### Using a selector in javascript\r\n- Use the `.querySelector` method\r\n\r\n```js\r\nconst div = document.querySelector(\"div\") // => First occurence of a div element in the document\r\n\r\nconst p = div.querySelector(\"p\") // => First occurence of a p element in the div\r\n\r\n```\r\n\r\n- To get all matching elements, use the `document.querySelectorAll` method\r\n\r\n```js\r\ndocument.querySelectorAll(\"div\") // NodeList of all div elements\r\n```\r\n\r\n#### By IDs\r\n To get an element by its ID, use a `#` before the element ID\r\n\r\n```js\r\ndocument.querySelector(\"#id\") // => document.getElementById('id')\r\n```\r\n\r\n#### By classes\r\n\r\n To get elements by class, use a `.` before the class name\r\n```js\r\ndocument.querySelectorAll(\".myElementClass\")\r\n```\r\n\r\n#### By tag name\r\n\r\n To get elements by tag name, just input the tag name\r\n```js\r\ndocument.querySelectorAll(\"body\") // => document.getElementsByTagName('body')\r\n```\r\n\r\n#### Replicating `.getElementById` and `getElementsByTagName`\r\n\r\n- Replicating `.getElementById`\r\n\r\n```js\r\ndocument.querySelector(\"#myDivId\") // => document.getElementById('myDivId')\r\n```\r\n\r\n- Replicating `.getElementsByTagName`\r\n\r\n```js\r\ndocument.querySelectorAll(\"a\") // => document.getElementsByTagName('a')\r\n```\r\n\r\n#### All elements\r\n\r\nTo get all elements use `*`\r\n\r\n```js\r\ndocument.querySelectorAll(\"*\") // => NodeList[...]\r\n```\r\n\r\n\r\n#### Using multiple selectors\r\n\r\nTo use multiple selectors, we seperate each of them with a `,`.\r\n```html\r\n<html>\r\n <body>\r\n <p>Hello i am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n```js\r\ndocument.querySelectorAll(\"p, a\") // => NodeList[p,a,a]\r\n```\r\n\r\n\r\n### More with elements\r\nIn the above examples, we made basic queries, but other things can be done like getting elements by order or parent.\r\n\r\n#### Getting element children\r\n\r\nThere 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.\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>Hello i am a paragraph</p>\r\n <div>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>\r\n Hello i am a paragraph and here's\r\n <a href=\"https://anotherplace.com\">a link</a>\r\n </p>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\nWith the above HTML as an example, we will look at these two variants.\r\n\r\n- Direct child\r\n\r\n```js\r\ndocument.querySelector(\"div > a\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- All children\r\n\r\n```js\r\ndocument.querySelectorAll(\"div a\") // => NodeList[a,a]\r\n```\r\n\r\n#### Getting elements by order\r\n\r\nThere are two ways to do this also. Consider the following HTML.\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <pre>I should intervene but i wont</pre>\r\n <p>Hello i am another paragraph</p>\r\n </div>\r\n <p>Hello i am a paragraph</p>\r\n </body>\r\n</html>\r\n```\r\n\r\n- Placed after\r\n \r\n```js\r\ndocument.querySelector(\"div + p\") // => <p>Hello i am a paragraph</p>\r\n```\r\n\r\n- Preceded by\r\n\r\nWith `~`, it does not matter the element immediately behind matches.\r\n\r\n```js\r\ndocument.querySelector(\"a ~ p\") // => <p>Hello i am another paragraph</p>\r\n```\r\nand 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.\r\n\r\n```js\r\ndocument.querySelector(\"a + p\") // => null\r\n```\r\n\r\n### Getting elements by attribute\r\n\r\nAn attribute selector starts with `[` and ends with `]` and is used as such\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p style=\"color:blue;\">Hello i am styled</p>\r\n <p>Hello i have no style</p>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p[style]\") // => <p style=\"color:blue;\">Hello i am styled</p>\r\n```\r\n\r\n#### Check attribute value\r\n\r\nTo check an attribute value we use the `=` symbol.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('a[href=\"https://awesomeplace.com\"]') // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n#### More with attribute values\r\n\r\n- Check if attribute starts with...\r\n\r\n```js\r\ndocument.querySelector('a[href^=\"https://awesome\"]') // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- Check if attribute ends with...\r\n\r\n```js\r\ndocument.querySelectorAll('a[href$=\".com\"]') // => NodeList[a,a]\r\n```\r\n\r\n- Check if the attribute contains a substring\r\n\r\n```js\r\ndocument.querySelectorAll('a[href*=\"place\"]') // => NodeList[a,a]\r\n```\r\n\r\n### Advanced selectors\r\n\r\n- :focus\r\n\r\nThis selects the element that currently has focus\r\n\r\n- :visited\r\n\r\nThis is used with `a` tags and selects links that have been visited\r\n\r\n- :link\r\n\r\nThis is also used with `a` tags but in this case, selects links that have not been visited\r\n\r\n- :enabled\r\n\r\nThis selects elements that are enabled(_not disabled_)\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n <button disabled=\"true\"> I have been disabled </button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll(\":enabled\") // => NodeList[p,p,a,a]\r\n```\r\n\r\n- :disabled\r\n\r\nThis selects elements that have been disabled\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n <button disabled=\"true\"> I have been disabled </button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\":disabled\") // => <button disabled=\"true\"> I have been disabled </button>\r\n```\r\n\r\n- :first-child\r\n\r\nThis selects the element that is the first child of its parent\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:first-child\") // => <p>I am a paragraph</p>\r\n```\r\n\r\n- :last-child\r\n\r\nThis selects the element that is the last child of its parent\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:last-child\") // => <a href=\"anotherplace.com\">I am another link</a>\r\n```\r\n\r\n- _el_:first-of-type\r\n\r\nThis selects the element that is the first child of its parent and is the same type as _el_\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"a:first-of-type\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- _el_:last-of-type\r\n\r\nThis selects the element that is the last child of its parent and is the same type as _el_\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:last-of-type\") // => <p>I am another paragraph</p>\r\n```\r\n\r\n- :not(_selector_)\r\n\r\nThis selects elements that don't match the selector\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\":not(a)\") // => <p>I am a paragraph</p>\r\n```\r\n\r\n- :nth-child(_n_)\r\n\r\nThis selects the element that is the _n_ th child of its parent.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"div:nth-child(2)\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- :nth-last-child(_n_)\r\n\r\nThis selects the element that is the _n_ th to the last child of its parent.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"div:nth-last-child(1)\") // => <a href=\"https://anotherplace.com\">I am another link</a>\r\n```\r\n\r\n### Mix and match\r\n\r\nThese selectors can be mixed together to perform some complex checks. e.g\r\n\r\n- A disabled button of class 'btn'\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n <button disabled=\"true\">I am disabled</button>\r\n <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('button.btn:disabled') // => <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n```\r\n\r\n- All disabled buttons in a `form`\r\n\r\n```html\r\n<html>\r\n <body>\r\n <form method=\"POST\">\r\n <input type=\"text\" name=\"firstname\" placeholder=\"firstname\"/>\r\n <input type=\"text\" name=\"lastname\" placeholder=\"lastname\"/>\r\n <button disabled=\"true\">Clear inputs</button>\r\n <button type=\"submit\">Submit</button>\r\n </form>\r\n <button disabled=\"true\">I am disabled</button>\r\n <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('form > button:disabled') // => <button disabled=\"true\">Clear inputs</button>\r\n```\r\n\r\n- All disabled buttons in a `form` and all buttons outside it\r\n\r\n```html\r\n<html>\r\n <body>\r\n <form method=\"POST\">\r\n <input type=\"text\" name=\"firstname\" placeholder=\"firstname\"/>\r\n <input type=\"text\" name=\"lastname\" placeholder=\"lastname\"/>\r\n <button disabled=\"true\">Clear inputs</button>\r\n <button type=\"submit\">Submit</button>\r\n </form>\r\n <button>I am not disabled</button>\r\n <button class=\"btn\">I am also not disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]\r\n```\r\n\r\n- All links to external pages\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n <a href=\"/otherpage.html\">I will to the other pages</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll('a[href^=\"https://\"]') // => NodeList[a,a]\r\n```\r\n\r\nAnd to get links that are not to external pages, use\r\n\r\n```js\r\ndocument.querySelector('a:not([href^=\"https://\"])') // => <a href=\"/otherpage.html\">I will to the other pages</a>\r\n```\r\n\r\n## Conclusion\r\n\r\nThese are just some of the ways you can use selectors in javascript and if you want to know more, here is a [link](https://www.w3schools.com/csSref/css_selectors.asp) to a CSS selector reference on w3c.\r\n\r\n### Thanks for reading!!!",
"description": "A guide to fully understanding CSS selectors in javascript",
"path": "/posts/using-css-selectors-in-javascript-3hlm",
"publishedAt": "2019-03-04T16:07:03.000Z",
"site": "https://blog.mainasara.dev",
"tags": [
"css",
"javascript",
"html",
"webdev"
],
"textContent": "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.\r\n\r\n### Basics\r\n\r\n#### Using a selector in javascript\r\n- Use the `.querySelector` method\r\n\r\n```js\r\nconst div = document.querySelector(\"div\") // => First occurence of a div element in the document\r\n\r\nconst p = div.querySelector(\"p\") // => First occurence of a p element in the div\r\n\r\n```\r\n\r\n- To get all matching elements, use the `document.querySelectorAll` method\r\n\r\n```js\r\ndocument.querySelectorAll(\"div\") // NodeList of all div elements\r\n```\r\n\r\n#### By IDs\r\n To get an element by its ID, use a `#` before the element ID\r\n\r\n```js\r\ndocument.querySelector(\"#id\") // => document.getElementById('id')\r\n```\r\n\r\n#### By classes\r\n\r\n To get elements by class, use a `.` before the class name\r\n```js\r\ndocument.querySelectorAll(\".myElementClass\")\r\n```\r\n\r\n#### By tag name\r\n\r\n To get elements by tag name, just input the tag name\r\n```js\r\ndocument.querySelectorAll(\"body\") // => document.getElementsByTagName('body')\r\n```\r\n\r\n#### Replicating `.getElementById` and `getElementsByTagName`\r\n\r\n- Replicating `.getElementById`\r\n\r\n```js\r\ndocument.querySelector(\"#myDivId\") // => document.getElementById('myDivId')\r\n```\r\n\r\n- Replicating `.getElementsByTagName`\r\n\r\n```js\r\ndocument.querySelectorAll(\"a\") // => document.getElementsByTagName('a')\r\n```\r\n\r\n#### All elements\r\n\r\nTo get all elements use `*`\r\n\r\n```js\r\ndocument.querySelectorAll(\"*\") // => NodeList[...]\r\n```\r\n\r\n\r\n#### Using multiple selectors\r\n\r\nTo use multiple selectors, we seperate each of them with a `,`.\r\n```html\r\n<html>\r\n <body>\r\n <p>Hello i am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n```js\r\ndocument.querySelectorAll(\"p, a\") // => NodeList[p,a,a]\r\n```\r\n\r\n\r\n### More with elements\r\nIn the above examples, we made basic queries, but other things can be done like getting elements by order or parent.\r\n\r\n#### Getting element children\r\n\r\nThere 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.\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>Hello i am a paragraph</p>\r\n <div>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>\r\n Hello i am a paragraph and here's\r\n <a href=\"https://anotherplace.com\">a link</a>\r\n </p>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\nWith the above HTML as an example, we will look at these two variants.\r\n\r\n- Direct child\r\n\r\n```js\r\ndocument.querySelector(\"div > a\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- All children\r\n\r\n```js\r\ndocument.querySelectorAll(\"div a\") // => NodeList[a,a]\r\n```\r\n\r\n#### Getting elements by order\r\n\r\nThere are two ways to do this also. Consider the following HTML.\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <pre>I should intervene but i wont</pre>\r\n <p>Hello i am another paragraph</p>\r\n </div>\r\n <p>Hello i am a paragraph</p>\r\n </body>\r\n</html>\r\n```\r\n\r\n- Placed after\r\n \r\n```js\r\ndocument.querySelector(\"div + p\") // => <p>Hello i am a paragraph</p>\r\n```\r\n\r\n- Preceded by\r\n\r\nWith `~`, it does not matter the element immediately behind matches.\r\n\r\n```js\r\ndocument.querySelector(\"a ~ p\") // => <p>Hello i am another paragraph</p>\r\n```\r\nand 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.\r\n\r\n```js\r\ndocument.querySelector(\"a + p\") // => null\r\n```\r\n\r\n### Getting elements by attribute\r\n\r\nAn attribute selector starts with `[` and ends with `]` and is used as such\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p style=\"color:blue;\">Hello i am styled</p>\r\n <p>Hello i have no style</p>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p[style]\") // => <p style=\"color:blue;\">Hello i am styled</p>\r\n```\r\n\r\n#### Check attribute value\r\n\r\nTo check an attribute value we use the `=` symbol.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('a[href=\"https://awesomeplace.com\"]') // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n#### More with attribute values\r\n\r\n- Check if attribute starts with...\r\n\r\n```js\r\ndocument.querySelector('a[href^=\"https://awesome\"]') // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- Check if attribute ends with...\r\n\r\n```js\r\ndocument.querySelectorAll('a[href$=\".com\"]') // => NodeList[a,a]\r\n```\r\n\r\n- Check if the attribute contains a substring\r\n\r\n```js\r\ndocument.querySelectorAll('a[href*=\"place\"]') // => NodeList[a,a]\r\n```\r\n\r\n### Advanced selectors\r\n\r\n- :focus\r\n\r\nThis selects the element that currently has focus\r\n\r\n- :visited\r\n\r\nThis is used with `a` tags and selects links that have been visited\r\n\r\n- :link\r\n\r\nThis is also used with `a` tags but in this case, selects links that have not been visited\r\n\r\n- :enabled\r\n\r\nThis selects elements that are enabled(_not disabled_)\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n <button disabled=\"true\"> I have been disabled </button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll(\":enabled\") // => NodeList[p,p,a,a]\r\n```\r\n\r\n- :disabled\r\n\r\nThis selects elements that have been disabled\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n <button disabled=\"true\"> I have been disabled </button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\":disabled\") // => <button disabled=\"true\"> I have been disabled </button>\r\n```\r\n\r\n- :first-child\r\n\r\nThis selects the element that is the first child of its parent\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:first-child\") // => <p>I am a paragraph</p>\r\n```\r\n\r\n- :last-child\r\n\r\nThis selects the element that is the last child of its parent\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:last-child\") // => <a href=\"anotherplace.com\">I am another link</a>\r\n```\r\n\r\n- _el_:first-of-type\r\n\r\nThis selects the element that is the first child of its parent and is the same type as _el_\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"a:first-of-type\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- _el_:last-of-type\r\n\r\nThis selects the element that is the last child of its parent and is the same type as _el_\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <p>I am another paragraph</p>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"p:last-of-type\") // => <p>I am another paragraph</p>\r\n```\r\n\r\n- :not(_selector_)\r\n\r\nThis selects elements that don't match the selector\r\n\r\n```html\r\n<html>\r\n <body>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\":not(a)\") // => <p>I am a paragraph</p>\r\n```\r\n\r\n- :nth-child(_n_)\r\n\r\nThis selects the element that is the _n_ th child of its parent.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"div:nth-child(2)\") // => <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n```\r\n\r\n- :nth-last-child(_n_)\r\n\r\nThis selects the element that is the _n_ th to the last child of its parent.\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector(\"div:nth-last-child(1)\") // => <a href=\"https://anotherplace.com\">I am another link</a>\r\n```\r\n\r\n### Mix and match\r\n\r\nThese selectors can be mixed together to perform some complex checks. e.g\r\n\r\n- A disabled button of class 'btn'\r\n\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n <button disabled=\"true\">I am disabled</button>\r\n <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('button.btn:disabled') // => <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n```\r\n\r\n- All disabled buttons in a `form`\r\n\r\n```html\r\n<html>\r\n <body>\r\n <form method=\"POST\">\r\n <input type=\"text\" name=\"firstname\" placeholder=\"firstname\"/>\r\n <input type=\"text\" name=\"lastname\" placeholder=\"lastname\"/>\r\n <button disabled=\"true\">Clear inputs</button>\r\n <button type=\"submit\">Submit</button>\r\n </form>\r\n <button disabled=\"true\">I am disabled</button>\r\n <button disabled=\"true\" class=\"btn\">I am also disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelector('form > button:disabled') // => <button disabled=\"true\">Clear inputs</button>\r\n```\r\n\r\n- All disabled buttons in a `form` and all buttons outside it\r\n\r\n```html\r\n<html>\r\n <body>\r\n <form method=\"POST\">\r\n <input type=\"text\" name=\"firstname\" placeholder=\"firstname\"/>\r\n <input type=\"text\" name=\"lastname\" placeholder=\"lastname\"/>\r\n <button disabled=\"true\">Clear inputs</button>\r\n <button type=\"submit\">Submit</button>\r\n </form>\r\n <button>I am not disabled</button>\r\n <button class=\"btn\">I am also not disabled</button>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll('form > button:disabled, form ~ button') // => NodeList[button, button, button]\r\n```\r\n\r\n- All links to external pages\r\n\r\n```html\r\n<html>\r\n <body>\r\n <div>\r\n <p>I am a paragraph</p>\r\n <a href=\"https://awesomeplace.com\">Hey I am a link</a>\r\n <a href=\"https://anotherplace.com\">I am another link</a>\r\n </div>\r\n <a href=\"/otherpage.html\">I will to the other pages</a>\r\n </body>\r\n</html>\r\n```\r\n\r\n```js\r\ndocument.querySelectorAll('a[href^=\"https://\"]') // => NodeList[a,a]\r\n```\r\n\r\nAnd to get links that are not to external pages, use\r\n\r\n```js\r\ndocument.querySelector('a:not([href^=\"https://\"])') // => <a href=\"/otherpage.html\">I will to the other pages</a>\r\n```\r\n\r\n## Conclusion\r\n\r\nThese are just some of the ways you can use selectors in javascript and if you want to know more, here is a [link](https://www.w3schools.com/csSref/css_selectors.asp) to a CSS selector reference on w3c.\r\n\r\n### Thanks for reading!!!",
"title": "Using CSS Selectors In Javascript"
}