npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

get-selector

v1.0.4

Published

Generates a unique CSS selector that will match only the passed element.

Downloads

13

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tylerjpetersontylerjpeterson

Keywords

Readme

100% test coverage

get-selector

Generates a unique CSS selector that will match only the passed element.

Browser-based utility to generate a unique selector for a given element. There are more comprehensive (and therefore often slower) solutions out there that will retrieve the smallest selector possible, but that comes at the price of complexity and usually accuracy.

This one prioritizes speed and accuracy. If you have an invalid DOM, results will vary.

How it works

Check if the element has an id attribute

  • If it does, return it and we're done.
  • If the element does not have an id...

Traverse the element's ancestry

  • It searches for its closest ancestor with an id attribute.
  • If found, it builds the selector to that ancestor and no further.
  • If no ancestor with an id is found...

Build the selector to <html>

  • This ensures a unique selector composed of nth-child sub-selectors.

Installation

Install via npm.

$ npm i get-selector --save

Usage

Require and call when needed. The function will return false if the passed element is not valid. Otherwise it will return the selector as a string.

var getSelector = require('get-selector');

console.log(getSelector(someElement));
// Outputs something like:
// 	#list-item-two > a:nth-child(1)

Documentation

Build jsdoc-based documentation:

$ npm run docs

Tests and coverage

Run tests and coverage:

$ npm test
$ npm run coverage

Sample output

All output below assumes the following markup:

<div class="demo">
  <ul>
    <li></li>
    <li></li>
    <li>
      <a href="linkOne" class="linkOne"></a>
      <a href="linkTwo" class="linkTwo"></a>
      <a href="linkThree" class="linkThree"></a>
    </li>
  </ul>
  <ul>
    <li class="itemOne first">
      <a href="linkOne" class="linkOne"></a>
      <a href="linkTwo" class="linkTwo"></a>
      <a href="linkThree" class="linkThree"></a>
    </li>
    <li class="itemTwo" id="list-item-two">
      <a href="linkOne" class="list-item-two-link-one"></a>
      <a href="linkTwo"></a>
      <a href="linkThree"></a>
      <a></a>
      <a href="linkOne" class="classOne classTwo classThree"></a>
      <a href="linkTwo" target="someTarget2" rel="someRel" class="classOne classTwo classThree"></a>
      <a href="linkThree" target="someTarget" rel="someRel" class="classOne classTwo classThree" id="linkZero"></a>
    </li>
    <li class="itemThree last">
      <a href="linkOne" id="linkOne" class="classOne classTwo classThree"></a>
      <a href="linkTwo" id="linkTwo"></a>
      <a href="linkThree" id="linkThree"></a>
    </li>
  </ul>
</div>

Basic usage:

getSelector(document.querySelector('.demo li.last'))
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(3)

Invalid element:

getSelector(document.querySelector('#i-do-not-exist'))
false

Closest descendant with an ID attribute:

getSelector(document.querySelector('.demo .list-item-two-link-one'))
#list-item-two > a:nth-child(1)

Build selector from document Element if no ancestors have an id:

getSelector(document.querySelector('.demo .linkThree'))
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(3) > a:nth-child(3)

Build a unique selector for any DOM element:

.demo *
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(1)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(2)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(3)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(3) > a:nth-child(1)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(3) > a:nth-child(2)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(1) > li:nth-child(3) > a:nth-child(3)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(1)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(2)
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(3)
#list-item-two
#list-item-two > a:nth-child(1)
#list-item-two > a:nth-child(2)
#list-item-two > a:nth-child(3)
#list-item-two > a:nth-child(4)
#list-item-two > a:nth-child(5)
#list-item-two > a:nth-child(6)
#linkZero
html > body > main:nth-child(3) > div:nth-child(4) > ul:nth-child(2) > li:nth-child(3)
#linkOne
#linkTwo
#linkThree