CODEWITHSUNDEEP
cssattributesmatch
Jens Törnell
Jens Törnell

Reputation: 24758

CSS - Match a whole attribute value

HTML

<div data-whatever='something cols-16 else'>
</div>

This works:

Will work - CSS

[data-whatever*='cols-1'] {
    background: red;
}

It will find the div and make it red.

Will not work - CSS

[data-whatever='cols-16'] {
    background: red;
}

It will not find the div because there are other stuff in there as well.

Problem

The problem with the working CSS, is that it matches both cols-16, cols-1 and any other that starts with cols-1.

Question

Is it possible to find an attribute value, exact match?

Upvotes: 1

Views: 142

Answers (3)

Danield
Danield

Reputation: 125443

In order to target the class cols-16 (even when it appears with other classes)

and not target the cols-1 class use this:

[data-whatever~='cols-16'] {
    background: green;
}

You can see this working in this fiddle.

For more info see this post (Goto #16. - X[foo~="bar"]

The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

To ensure that it only matches cols-1 and not cols-16 without relying on the cols-16 style overriding the cols-1 style (below), you could:

[data-whatever='cols-1'],
[data-whatever^='cols-1 '],
[data-whatever*='cols-1 '],
[data-whatever$='cols-1'] {
    background: red;
}

This matches data-whatever="cols-1", data-whatever="... cols-1", data-whatever="cols-1 ..." or data-whatever="... cols-1 ...".

JSFiddle example.

Thanks to aleation's answer: data-whatever~="cols-1" achieves the same as the above in just one selector.

--

At any rate your cols-16 styling could overwrite your cols-1 styling anyway, depending on the order it was presented:

[data-whatever*='cols-1'] {
    background: red;
}

[data-whatever*='cols-16'] {
    background: blue;
}

/* cols-1 will be red. cols-16 will be blue */

JSFiddle example.

Upvotes: 0

aleation
aleation

Reputation: 4844

try this:

[data-whatever~='cols-1'] {
    background: red;
}

It worked for me if I didn't missunderstand your question

Edit: I just remembered the ~= randomly, tried it, and pasted it.

But I just googled a bit (I had curiosity and found This, it's quite interesting)

Upvotes: 2

Related Questions