---
title: "How to select HTML element that has \"data-name\"?"
description: "How to select HTML element that has \"data-name\"?"
author: "Utpal Vishwas"
published: 2023-07-31
updated: 2023-08-01
canonical: https://www.mindstick.com/forum/159387/how-to-select-html-element-that-has-data-name
category: "jquery"
tags: ["jquery", "jquery selectors", "html element"]
reading_time: 2 minutes
---
# How to select HTML element that has "data-name"?
How to [select](https://www.mindstick.com/forum/160534/orderby-then-select-vs-select-then-orderby-performance) an [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) element that has "[data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)-[name](https://yourviews.mindstick.com/view/87450/how-to-generate-a-brand-name-using-linkedin-comprehensive-guide)"?
## Replies
### Reply by Aryan Kumar
There are a few ways to select an HTML element that has a data-name attribute. Here are a few methods:
## Using CSS
You can use the `data-name` attribute as a selector in CSS. For example, the following CSS will select all elements with the data-name attribute of "my-name":
CSS
```plaintext
[data-name="my-name"] {
/* Style the elements */
}
```
## Using JavaScript
You can also use JavaScript to select elements with the data-name attribute. The following JavaScript code will select all elements with the data-name attribute of "my-name":
JavaScript
```plaintext
var elements = document.querySelectorAll("[data-name='my-name']");
```
The `elements` variable will contain an array of all the elements with the data-name attribute of "my-name".
## Using the jQuery library
You can also use the jQuery library to select elements with the data-name attribute. The following jQuery code will select all elements with the data-name attribute of "my-name":
JavaScript
```plaintext
var elements = $("[data-name='my-name']");
```
The `elements` variable will contain an array of all the elements with the data-name attribute of "my-name".
Here is an example of how to use this code:
HTML
```plaintext
This is a div with the data-name attribute of "my-name"
This is a div with the data-name attribute of "other-name"
```
This code will create two div elements, one with the data-name attribute of "my-name" and one with the data-name attribute of "other-name". The `each()` method will loop through the elements and print the element to the console.
---
Original Source: https://www.mindstick.com/forum/159387/how-to-select-html-element-that-has-data-name
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.