CSS attribute select when any string

Question

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

Manas Khandelwal · Accepted Answer · 2021-03-28 20:44:01Z

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:

edited Mar 28, 2021 at 20:44

answered Mar 28, 2021 at 20:28

Manas Khandelwal

3,9442 gold badges15 silver badges26 bronze badges

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

6 Comments

Jamie Over a year ago

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

Jamie Over a year ago

Thanks, still not quite there as all of my elements have the data-modals attribute. I only want to select those with a value

Manas Khandelwal Over a year ago

@Jamie I have changed the answer, now it works as you told!

Jamie Over a year ago

(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-"]

Manas Khandelwal Over a year ago

@Jamie Now it is working... it is ignoring data-modals="" and working with data-modals="any text"

|

Collectives™ on Stack Overflow

CSS attribute select when any string

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related