how to add css in html element by its arrtibute (not ID not Class)

Question

I need to get a display none the above span by attribute "data-email".

<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button"> </span>

score 1 · Answer 1 · answered Jul 29 '20 at 13:18

1

The [attribute] selector is used to select elements with a specified attribute.

in your css you can do that:

span[data-mail] {
 display: none;
}

or

span[data-mail="qwerty"] {
 display: none;
}

span[data-email]{
  color: red
}

span[data-email="test"]{
  color: blue
}

<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">hello </span>

<span data-email="test">world</span>

answered Jul 29 '20 at 13:18

S.A.

36
3

not working above code – Sagar Dhiman Jul 29 '20 at 13:31
@SagarDhiman can you elaborate ? Why do you say it's not working ? If you click on `Run code snippet` you should see that it works indeed ! – turbopasi Jul 30 '20 at 07:58

Akash Shrivastava · Answer 2 · 2020-07-29T14:09:39.500

0

Just select element by attribute and apply CSS.

$('span[data-email="qwerty"]').css({
  display: "none"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">Some text</span>

edited Jul 29 '20 at 14:09

answered Jul 29 '20 at 12:07

Akash Shrivastava

1,365
8
16

still not working – Sagar Dhiman Jul 29 '20 at 13:29

Ankit Tiwari · Answer 3 · 2020-07-30T07:54:36.263

Because its HTML data attribute you can do the following in javascript

email_condition = "qwerty"; //you can set whatever condition you need
console.log(document.querySelector(`span[data-email="${email_condition}"]`));
document
  .querySelector(`span[data-email="${email_condition}"]`)
  .classList.add("display_none");

display_none is a class defined in css whose definition looks like

.display_none {
  display: none;
}

You can refer my [codepen link]:https://codepen.io/ankitt8/pen/pogXJJV
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

As mentioned in the comment if you want to make the code work for multiple span tags with same email condition you can do as below

email_condition = "qwerty";
let allSpanEmailTag = document.querySelectorAll(
  `span[data-email="${email_condition}"]`
);
// note its querySelectorAll previously it was querySelector only
// querySelectorAll returns a list of node based on specified condition.
for (let i = 0; i < allSpanEmailTag.length; ++i) {
  allSpanEmailTag[i].classList.add("display_none");
}

The codepen link has been updated so you can refer that!

about code is working for only for single span, but in my case their is multiple span of same condition — Sagar Dhiman, Jul 30 '20 at 05:12

how to add css in html element by its arrtibute (not ID not Class)

3 Answers3