{"id":15649735,"url":"https://github.com/varunsridharan/dizzle","last_synced_at":"2025-04-30T17:21:38.807Z","repository":{"id":57213201,"uuid":"296296099","full_name":"varunsridharan/dizzle","owner":"varunsridharan","description":"~ Simple Fast CSS Selector Engine ~","archived":false,"fork":false,"pushed_at":"2020-10-18T14:59:44.000Z","size":653,"stargazers_count":37,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T07:47:05.099Z","etag":null,"topics":["adjacent-siblings","css","css-selector","css-selector-engines","css-selector-parser","css3","dizzle","javascript","javascript-css","javascript-css-library","jquery","jquery-alternative","selector-engine","sizzle"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/varunsridharan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-17T10:39:03.000Z","updated_at":"2023-06-10T10:44:34.000Z","dependencies_parsed_at":"2022-08-24T21:41:55.341Z","dependency_job_id":null,"html_url":"https://github.com/varunsridharan/dizzle","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunsridharan%2Fdizzle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunsridharan%2Fdizzle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunsridharan%2Fdizzle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varunsridharan%2Fdizzle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varunsridharan","download_url":"https://codeload.github.com/varunsridharan/dizzle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251749115,"owners_count":21637456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adjacent-siblings","css","css-selector","css-selector-engines","css-selector-parser","css3","dizzle","javascript","javascript-css","javascript-css-library","jquery","jquery-alternative","selector-engine","sizzle"],"created_at":"2024-10-03T12:31:34.910Z","updated_at":"2025-04-30T17:21:38.749Z","avatar_url":"https://github.com/varunsridharan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg](https://cdn.svarun.dev/gh/varunsridharan/dizzle/banner.jpg)\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.producthunt.com/posts/dizzle-2?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-dizzle-2\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=269511\u0026theme=dark\" alt=\"Dizzle - ~ Simple Fast CSS Selector Engine ~ | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## What?\n___Dizzle___ turns CSS selectors into functions that tests if elements match them. When searching for elements, testing is executed \"from the top\", similar to how browsers execute CSS selectors.\n\n## Features:\n* Full implementation of CSS3 \u0026 CSS4 selectors\n* Partial implementation of jQuery extensions\n* Pretty good performance\n\n## Usage \nGet **Dizzle** From [jsDelivr](https://cdn.jsdelivr.net/npm/dizzle/dist/dizzle.umd.min.js) and use it like this:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/dizzle/dist/dizzle.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var divs = dizzle('div');\n  console.log(divs);\n\u003c/script\u003e\n```\n\n**Dizzle** is also available through [npm](https://npmjs.com) as the [`dizzle`](https://npmjs.com/package/dizzle) package:\n\n    npm install --save dizzle\n\nThat you can then use like this:\n\n```javascript\nimport dizzle from \"dizzle\";\n\ndizzle.find('div.myelement');\n```\n\n## Documentation\n### Finding Elements\n```javascript\n/**\n * Search For h2 elements inside div in whole document\n */\nconsole.log(dizzle('div \u003e h2'));\n\n/**\n * Fetches All H2 Elements in document\n * and loops into results and find span element in each h2 element\n */\nvar $h2 = dizzle('h2');\n$h2.forEach(function(element){\n    console.log(dizzle('span',element));\n});\n```\n\n### IS / Match Element `Pseudo`\n```javascript\n/**\n * Fetches All H2 Elements in document\n * and loops into results and find span element in each h2 element\n */\nvar $h2 = dizzle('h2');\n$h2.forEach(function(element){\n   \n    if(dizzle.is(':visible',element)){\n        // your code if h2 is visible \n    }\n});\n```\n### Element Filter\n```javascript\n/**\n * Filter All Visible H2 tags\n */\nvar visibleH2 = dizzle.filter(':visible',dizzle('h2'));\n```\n\n## Custom Adapter Support\n```javascript\nconst customAdapter = {\n\tattr: function( elem, attrName ) {\n\t\tif( 'custom-Name' === attrName ) {\n\t\t\treturn elem.getAttribute('customName');\n\t\t}\n\t\treturn elem.getAttribute( attrName );\n\t}\n};\n\nconst attr = dizzle('[custom-Name=\"Yes\"]',null,customAdapter)\n```\n\n### Custom Adapter Functions\nA custom adapter must implement the following functions:\n\n    isTag, getChildren, getParent, attr, getSiblings, getTagName\n    \nPlease check [src/adapter.js](https://github.com/varunsridharan/dizzle/blob/main/src/adapter.js) for more information\nCustom adapters can be passed for all the below functions\n\n```javascript\n/**\n  * @param selector String\n  * @param context Parent Element / Root\n  * @param adapter Custom Adapter Function\n  */\ndizzle( selector, context, adapter );\n\n/**\n  * @param selector String\n  * @param elem Single Element Object\n  * @param adapter Custom Adapter Function\n  */\ndizzle.is( selector, elem, adapter )\n\n/**\n  * @param selector String\n  * @param elems Array of elements\n  * @param adapter Custom Adapter Function\n  */\ndizzle.filter( selector, elems, adapter )\n\n```\n\n\n## Supported Selectors\n| Combinators | Attributes | Pseudo |\n| :--- | :---: | ---: |\n| [`\u003e` Child](#child-) | `=` | `:empty` |\n| [`+` Adjacent](#adjacent-) | `!=` | `:disabled` |\n| [`~` General Sibling](#sibling-) | `\\|=` | `:enabled` | \n| [` ` Descendant](#descendant--) | `*=` | `:lang` |\n| | `~=` | `:visible` |\n| | `$=` | `:hidden` |\n| | `^=` | `:contains` |\n| | | `:first-child` |\n| | | `:last-child` |\n| | | `:first-of-type` |\n| | | `:last-of-type` |\n| | | `:even` |\n| | | `:odd` |\n| | | `:gt` |\n| | | `:lt` |\n| | | `:eq` |\n| | | `:first` |\n| | | `:last` |\n| | | `:nth-of-type` |\n| | | `:nth-last-of-type` |\n| | | `:nth-last-child` |\n| | | `:checked` |\n| | | `:input` |\n| | | `:button` |\n| | | `:parent` |\n| | | `:selected` |\n| | | `:text` |\n| | | `:only-child` |\n| | | `:only-of-type` |\n| | | `:has` |\n| | | `:not` |\n| | | `:radio` |\n| | | `:checkbox` |\n| | | `:file` |\n| | | `:password` |\n| | | `:image` |\n| | | `:submit` |\n| | | `:reset` |\n\n## Combinators\n\n### Child `\u003e`\nThe child selector selects all elements that are the children of a specified element.\n```javascript\ndizzle('div \u003e p \u003e span');\n```\n\n### Adjacent `+`\nThe adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.\n```javascript\ndizzle('div.copyright \u003e p.content + span.year');\n```\n\n### Sibling `~`\nThe general sibling selector selects all elements that are siblings of a specified element.\n```javascript\ndizzle('p ~ span');\n```\n\n### Descendant ` `\nThe descendant selector matches all elements that are descendants of a specified element.\n```javascript\ndizzle('div p span');\n```\n\n---\n\n## 📝 Changelog\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n[Checkout CHANGELOG.md](/CHANGELOG.md)\n\n## 🤝 Contributing\nIf you would like to help, please take a look at the list of [issues](issues/).\n\n## 💰 Sponsor\n[I][twitter] fell in love with open-source in 2013 and there has been no looking back since! You can read more about me [here][website].\nIf you, or your company, use any of my projects or like what I’m doing, kindly consider backing me. I'm in this for the long run.\n\n- ☕ How about we get to know each other over coffee? Buy me a cup for just [**$9.99**][buymeacoffee]\n- ☕️☕️ How about buying me just 2 cups of coffee each month? You can do that for as little as [**$9.99**][buymeacoffee]\n- 🔰         We love bettering open-source projects. Support 1-hour of open-source maintenance for [**$24.99 one-time?**][paypal]\n- 🚀         Love open-source tools? Me too! How about supporting one hour of open-source development for just [**$49.99 one-time ?**][paypal]\n\n## 📜  License \u0026 Conduct\n- [**General Public License v3.0 license**](LICENSE) © [Varun Sridharan](website)\n- [Code of Conduct](code-of-conduct.md)\n\n## 📣 Feedback\n- ⭐ This repository if this project helped you! :wink:\n- Create An [🔧 Issue](issues/) if you need help / found a bug\n\n## Connect \u0026 Say 👋\n- **Follow** me on [👨‍💻 Github][github] and stay updated on free and open-source software\n- **Follow** me on [🐦 Twitter][twitter] to get updates on my latest open source projects\n- **Message** me on [📠 Telegram][telegram]\n- **Follow** my pet on [Instagram][sofythelabrador] for some _dog-tastic_ updates!\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003ci\u003eBuilt With ♥ By \u003ca href=\"https://sva.onl/twitter\"  target=\"_blank\" rel=\"noopener noreferrer\"\u003eVarun Sridharan\u003c/a\u003e 🇮🇳 \u003c/i\u003e\n\u003c/p\u003e\n\n---\n\n\u003c!-- Personl Links --\u003e\n[paypal]: https://sva.onl/paypal\n[buymeacoffee]: https://sva.onl/buymeacoffee\n[sofythelabrador]: https://www.instagram.com/sofythelabrador/\n[github]: https://sva.onl/github/\n[twitter]: https://sva.onl/twitter/\n[telegram]: https://sva.onl/telegram/\n[email]: https://sva.onl/email\n[website]: https://sva.onl/website/\n\n\u003c!-- Private --\u003e\n[composer]: https://sva.onl/composer/\n[downloadzip]:https://github.com/varunsridharan/vsp-framework/archive/master.zip\n[wpcsl]: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarunsridharan%2Fdizzle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarunsridharan%2Fdizzle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarunsridharan%2Fdizzle/lists"}