0

I have a data attribute data-modals. I would like to target this with CSS when the property has a value. I don't mind what the value is.

I can find guides for selecting when the attribute exists, or specific values, but not for 'any' value - the equivalent of '*'.

ie.

<element data-modals="" /> should not be targeted

<element data-modals="any text" /> should be targeted

Improve this question

1 Answer 1

Reset to default
1

You can the CSS Attribute Selector like this:

element[data-modals]:not([data-modals=""]) { color: red; }

Example:

p[data-modals]:not([data-modals=""]) { color: red; }
<p data-modals=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit. </p> <p data-modals="any text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit. </p>



Some useful links:

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks, but I think you've misunderstood. I want to select regardless of the attribute value. In your example, all of the <p /> have the data-modals attribute. Some will have random values. I want to select those with a value, regardless of the value
Thanks, still not quite there as all of my elements have the data-modals attribute. I only want to select those with a value
@Jamie I have changed the answer, now it works as you told!
(This answered a previous version of your answer) Unfortunately not. At the moment I will end up with a string containing any one of "search menu social login". I can change the underlying login to add a prefix modal-. I can then use [data-modals*="modal-"]
@Jamie Now it is working... it is ignoring data-modals="" and working with data-modals="any text"
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.