{"id":15041320,"url":"https://github.com/cimmanon/selector-nth","last_synced_at":"2026-01-06T17:09:14.189Z","repository":{"id":78211096,"uuid":"51410978","full_name":"cimmanon/selector-nth","owner":"cimmanon","description":"A collection of Sass mixins for modifying the nth position of a selector","archived":false,"fork":false,"pushed_at":"2016-04-18T01:31:47.000Z","size":12,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T14:45:03.540Z","etag":null,"topics":["css-selectors","sass","sass-library","sass-mixins"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cimmanon.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-10T00:13:25.000Z","updated_at":"2022-05-19T14:53:47.000Z","dependencies_parsed_at":"2023-03-08T08:00:21.638Z","dependency_job_id":null,"html_url":"https://github.com/cimmanon/selector-nth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cimmanon%2Fselector-nth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cimmanon%2Fselector-nth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cimmanon%2Fselector-nth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cimmanon%2Fselector-nth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cimmanon","download_url":"https://codeload.github.com/cimmanon/selector-nth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245822228,"owners_count":20678163,"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":["css-selectors","sass","sass-library","sass-mixins"],"created_at":"2024-09-24T20:45:57.355Z","updated_at":"2026-01-06T17:09:14.161Z","avatar_url":"https://github.com/cimmanon.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"This library provides a collection of Sass functions for modifying the middle of a selector.  Also included are convenient helper functions and mixins for commonly used operations.\n\n# How it works\n\nThe `selector-nth` function has 4 arguments:\n\n* The selector you are working with, this will usually be `\u0026`\n* The position you want to modify (positive numbers start from the beginning, negative numbers start from the end)\n* The name of the function you want to run on whatever is in the position specified in argument #2 (must accept at least one argument: the value at the designated position)\n* A catchall for any extra arguments you want to pass to the function from argument #3\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree {\n\t\t\t\u0026:before {\n\t\t\t\t@at-root #{selector-nth(\u0026, 2, smart-append-selector, '.new')} {\n\t\t\t\t\tcolor: blue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nOutput:\n\n```css\n.one-a two.new three:before, .one-b two.new three:before {\n  color: blue;\n}\n```\n\nUsing the function directly allows for easier debugging, but mixins are more convenient to use.\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree {\n\t\t\t\u0026:before {\n\t\t\t\t@debug selector-nth(\u0026, -1, smart-append-selector, '.new');\n\t\t\t\t@debug selector-nth(\u0026, -2, smart-append-selector, '.new');\n\t\t\t\t@debug selector-nth(\u0026, -3, smart-append-selector, '.new');\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n\n# Appending a selector\n\nThis function will properly insert a selector ensuring that element selectors are at the beginning and pseudo selectors are at the end.\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree {\n\t\t\t\u0026:before {\n\t\t\t\t@at-root #{selector-nth(\u0026, 3, smart-append-selector, '.new')} {\n\t\t\t\t\tcolor: green;\n\t\t\t\t}\n\n\t\t\t\t@include nth-append-selector(3, '.new') {\n\t\t\t\t\tcolor: green;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nOutput:\n\n```css\n.one-a two three.new:before, .one-b two three.new:before {\n  color: green;\n}\n```\n\n# Appending a sibling selector\n\nThe `add-sibling-selector` function takes an optional 2nd argument.  By default it uses the `+` operator, but you can pass in `~` instead.\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree {\n\t\t\t@at-root #{selector-nth(\u0026, 2, add-sibling-selector)} {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\n\t\t\t@include nth-sibling-selector(2) {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\n\t\t\t@include nth-sibling-selector(3, '~') {\n\t\t\t\tcolor: green;\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nOutput:\n\n```css\n.one-a two + two three, .one-b two + two three {\n  color: blue;\n}\n.one-a two three ~ three, .one-b two three ~ three {\n  color: green;\n}\n```\n\n# Append attribute selector value\n\nThe `smart-append-attribute-selector` function takes an optional 2nd argument.  By default it uses a hyphen when appending the new attribute value to an existing attribute value.\n\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree[foo], three[foo=\"boo\"], three[foo='moo'] {\n\t\t\t\u0026:before {\n\t\t\t\t@at-root #{selector-nth(\u0026, 3, smart-append-attribute-selector, 'xyz')} {\n\n\t\t\t\t@include nth-append-attribute-selector(3, 'new') {\n\t\t\t\t\tcolor: green;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nOutput:\n\n```css\n.one-a two three[foo=\"new\"]:before, .one-a two three[foo=\"boo-new\"]:before, .one-a two three[foo='moo-new']:before,\n.one-b two three[foo=\"new\"]:before, .one-b two three[foo=\"boo-new\"]:before, .one-b two three[foo='moo-new']:before {\n  color: green;\n}\n```\n\n# Removing a selector\n\nEver wanted to remove a selector for whatever reason?\n\n```scss\n.one-a, .one-b {\n\ttwo {\n\t\tthree {\n\t\t\t@at-root #{selector-nth(\u0026, 2, remove-selector)} {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\n\t\t\t@include nth-remove-selector(2) {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nOutput:\n\n```css\n.one-a three, .one-b three {\n  color: blue;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcimmanon%2Fselector-nth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcimmanon%2Fselector-nth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcimmanon%2Fselector-nth/lists"}