How can I use the CSS atribute selector to select multiple items? I need to hide some options written out by 3rd-party code on my site. In the example code below, I need to hide option 3, 4 and 6:
<select id="requestTypeSelect" name="requestType" required="required">
<option value="" selected="selected" disabled="disabled">Type of Request *</option>
<option value="1">Right to erasure</option>
<option value="2">Right to access</option>
<option value="3">Right to correct data</option>
<option value="4">Right to data portability</option>
<option value="5">Right to restrict use of personal data</option>
<option value="6">Right to object to the use of personal data</option>
</select>
I can use the CSS below:
<style>
/* hide options 3 5 and 6 */
[value="3"] {
display: none;
}
</style>
which works when I target just 1 option, but when I try to hide others, no luck. I tried [value~="3 5 6"]based on what I'm reading from https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors but that doesn't work. I'm only able to hide a single item this way.
Any help would be greatly appreciated. thanks!