Possible to target an element by its value in CSS?

Question

Here's what I have in my JS:

if ($('#submit').attr('value') == 'Save Changes'){
    $('#submit').hide();
};

Is there a way to target an element by its Value in CSS, and then hide it if its value == something?

If not- Is there a way to make this code faster? I can see the Hide happening when I load the page.

Does this answer your question? [Select elements by data attribute in CSS](https://stackoverflow.com/questions/5324415/select-elements-by-data-attribute-in-css) — Kavian Rabbani, Jul 28 '20 at 12:54

score 3 · Accepted Answer · answered Jul 28 '20 at 12:52

To prevent the flash of the item before hiding - the best way is to flip the logic - start with it hidden and then show it if needed

// css
#submit {display: none};

// js
if ($('#submit').attr('value') !== 'Save Changes'){
    $('#submit').show();
};

Kavian Rabbani · Answer 2 · 2020-07-28T12:57:25.837

2

you can use attribute selector and change the logic to prevent flashing:

#submit {
  display: none;
}

#submit:not([value="Save Changes"]) {
  display: block;
}

edited Jul 28 '20 at 12:57

answered Jul 28 '20 at 12:51

Kavian Rabbani

Looking at your example, I made a discovery for myself :) nice – s.kuznetsov Jul 28 '20 at 12:58

2 Answers2