JS: Create a CSS selector string from an HTML element

Question

In JavaScript, given I have selected an HTML element, for example:

<div id="some-id" class="class-1 class-2">...</div>

Is there an easy way to create the corresponding CSS selector/QuerySelector?

"div#some-id.class-1.class-2"

Or is the only way to construct this string manually using tagName, id and classList?

im kinda confused on what u want to achieve. if u want to select an element by id u can use document.querySelector('#some-id'). not sure what is ur question — ericmp
– ericmp, Commented Jan 2, 2023 at 12:56
@ericmp thanks, that seems to be like what I was thinking about. If you write that as an answer, I will mark it as answered (if no better solutions show up). — Peter
– Peter, Commented Jan 2, 2023 at 13:00
@Andy I am not trying to select the element. I want to convert an element to a string presentation in the QuerySelector syntax. — Peter
– Peter, Commented Jan 2, 2023 at 13:02

mplungjan · Accepted Answer · 2023-01-02 13:44:46Z

1

tagName, id and classList are quite simple to use if you want a list of selectors

If you have an ID, you do not need the rest:

const divSelectors = tag => [...document.querySelectorAll(tag)]
  .map(tag => tag.id ? `#${tag.id}` : `${tag.tagName.toLowerCase()}${tag.classList.length ? `.${[...tag.classList].join('.')}` : ''}`)
console.log(divSelectors("div"))

<div>...</div>
<div id="id1" class="class-1 class-2">...</div>
<div id="id2" class="class-3 class-4">...</div>
<div id="id3" class="class-5 class-6">...</div>
<div class="class-7 class-8">...</div>
<div id="id4">...</div>

But if you insist:

const divSelectors = tag => [...document.querySelectorAll(tag)]
  .map(tag => `${tag.tagName.toLowerCase()}${tag.id?`#${tag.id}`:''}${tag.classList.length ? `.${[...tag.classList].join('.')}` : ''}`)
console.log(divSelectors("div"))

<div>...</div>
<div id="id1" class="class-1 class-2">...</div>
<div id="id2" class="class-3 class-4">...</div>
<div id="id3" class="class-5 class-6">...</div>
<div class="class-7 class-8">...</div>
<div id="id4">...</div>

Surprisingly enough we can use querySelector on multiple divs with the same ID

console.log(document.querySelector("#aDiv").textContent)
console.log(document.querySelector("#aDiv.three.four").textContent)

console.log([...document.querySelectorAll("#aDiv")].map(div => div.textContent))

<div id="aDiv" class="one two">First</div>
<div id="aDiv" class="three four">Second</div>

edited Jan 2, 2023 at 13:44

answered Jan 2, 2023 at 13:01

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Peter Over a year ago

Wow, that is some condensed code. 🤩

Peter Over a year ago

There's a bug when there are no classes: <div> -> "div0". Also, if there is an ID, then technically you could omit classes also. But note that in the real world there are documents with duplicate IDs.

Peter Over a year ago

I fixed a small bug where the leading dot for the classes was missing.

mplungjan Over a year ago

All works again.

Peter Over a year ago

As HTML can't have "fatal" errors, the rule about unique IDs is more like a guideline. So browsers have to handle duplicate IDs, so in reality IDs are just a special kind of class.

|

mmh4all · Accepted Answer · 2023-01-02 13:16:33Z

1

This is a possible solution for you problem

function createCssSelector(el){
    return `${el.nodeName}${el.id ? '#'+el.id : ''}${el.getAttribute('class') ? '.'+el.getAttribute('class').split(' ').join('.') : ''}`;
}

console.log(createCssSelector(document.querySelector('#some-id')));

console.log(createCssSelector(document.querySelector('#some-id-2')));

console.log(createCssSelector(document.querySelector('span')));

console.log(createCssSelector(document.querySelector('#some-id-3')));

<div id="some-id" class="class-1 class-2 class-4">...</div>

<p id="some-id-2" class="black blue white">...</p>

<span class="black blue white">...</span>

<p id="some-id-3" class="">...</p>

edited Jan 2, 2023 at 13:16

answered Jan 2, 2023 at 13:05

mmh4all

1,7904 gold badges10 silver badges24 bronze badges

1 Comment

Peter Over a year ago

This breaks in case there are no classes, and will always output "#" even if there is no id. (I see my question was not clear about that, have edited the question.)

ericmp · Accepted Answer · 2023-01-02 14:28:11Z

1

Having this HTML:

<div id="some-id" class="class-1 class-2">...</div>

You can select the div using different techniques/ways:

document.querySelector("#some-id")

document.querySelector(".class-1.class-2")

document.getElementById("some-id")

document.querySelector("#some-id.class-1.class-2")

...

Depending on what are you doing you want to use one or other one. If there is no context, I'd stick to the first one.

* (Extra tip) If you are in a web browser, you can:

Open up the DevTools.
Click on the cursor icon - "Select an element in the page to inspect it".

Click an element in the page.
Go to the devtools console.
Write $0. If you don't return, it will show you the full selector.

If you return, it will log you the selected element.

Documentation:

answered Jan 2, 2023 at 14:28

ericmp

2,41911 silver badges27 bronze badges

1 Comment

Peter Over a year ago

You a correct, basically what I want is a function that returns the string you see in DevTools. ("div#some-id.class-1.class-2")

Collectives™ on Stack Overflow

JS: Create a CSS selector string from an HTML element

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related