css use data-id CSS selector

[Janick.Spielmann]

Hi Guys 

 

I am currently working on a Laravel Page.

 

Now there is a bad explanation on how it dosn't work.  

 

I am writing browser based test atm. Now I have "Buttens" on my website to add a product to the cart. because there are more then one product the "Buttons" are numbered using data-id. The "Buttons" also have a universal name "add-to-cart"

 

Using chrome developing tool I am trying to find the code peace using keywords:

 

This is the Code peace: 

<a href="javascript:void(0);" class="btn btn-icon btn-primary sa-add-to-cart" id="add-to-cart" data-id="1"> <svg class="lnr lnr-cart "> usexlink:href="/icons.svg#lnr-cart"></use></svg></a>

"Hinzufügen" is the name of the "Button"

 

as you can see, the data-id is 1 and the id is add-to-cart. I want to search for both at the same time. 

 

I have tried 

#add-to-cart:nth-child(1)

but this shows all the #add-add-to-cart elements.

 

How can I define a single element. 

 

Hope you can understand my very bad explanation of my problem.

 

Thanks for your help 

 

Janick

[PAEz]

let element = document.querySelector("#add-to-cart[data-id='1']"

This will select the element you described.

The #add-to-cart will select an element with the ID of add-to-cart and the [data-id='1'] says with an attribute of data-id that equals "1".

 

https://www.w3.org/TR/selectors-3/

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://jsfiddle.net/yrdzbhaf/

 

EDIT: OH, and if you have more than one element with an id of add-to-cart then that should really be a class.  ID is meant to identify a single element, otherwise it should be a class.  So more correct would be a class of add-to-cart and then use the ID to distinguish which one.