CSS Data Attribute Conditional Value Selector

CSS data attribute conditional value selector?

With CSS you can select elements with their attributes:

div[data-points] {  }

or the value of their attributes:

div[data-points="800"] {  }

but you can't use conditions in CSS.

I would recommend you to use a javaScript solutions for this problem which can be so easy, for example, using jQuery you can do something like:

$("div[data-points]").each(function() {
    if ($(this).attr('data-points') > 1000) {
        $(this).addClass('larger-than-1000'); // Or whatever
    }
});

How do I target elements with an attribute that has any value in CSS?

The following will match any anchor tag with a rel attribute defined:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Update:
To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :not pseudo-class:

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

How might I build a negative attribute selector in CSS?

Unfortunately, there isn't a more concise way. Even jQuery's [att!=val] selector, which has remained exclusive to jQuery all these years, doesn't require that the attribute be present to match, so you'd still need to pair that with [att].

I understand this is an experiment with the bottom value concept, but for the sake of completeness I'll add that the closest things to a null attribute value in HTML (and by extension CSS) are either the empty string (the default value of custom data attributes), or the lack of the attribute entirely. The idiomatic way to achieve your desired result is to choose either the empty string or omission of the attribute altogether, and use a corresponding [data-my-custom-attribute=""] or :not([data-my-custom-attribute]) selector respectively in CSS, and if (myCustomAttribute === "") or if (("myCustomAttribute" in myDiv.dataset) === false) respectively in JS.

How to make a condition in CSS with an HTML attribute?

Here is the solution of applying CSS using Data-Attribute.

.answer:after {content: "OK";}
.answer[data-value="true"]:after {content: "True";}
.answer[data-value="false"]:after {content: "False"; }

<div class="block">      <div class="question">      Question      </div>      <div class="answer" data-value="true">      </div></div>

Select elements by attribute in CSS

If you mean using an attribute selector, sure, why not:

[data-role="page"] {
    /* Styles */
}

There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",

browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and
you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.

Can't find a not equal css attribute selector

Use the code like this:

div[foo]:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

CSS [attribute=value] selector does not get applied

You’re not setting an attribute clicked but a property. The code below demonstrates how to use setAttribute and getAttribute correctly. Also, for custom properties you should use the data- prefix.

You need to use the ternary condition, instead of simply negating it: on the first click, the attribute is null. Negating it yields true, which is then set as an attribute and converted to a string 'true'. Negating this a second time will make it false → 'false'. Not because it was 'true', but because it was a non-empty string! Any further click will keep the attribute value at 'false'.

Also, because the attribute is neither 'true' nor 'false' at the first time, this is checking whether it’s not 'true'.

function doesntWork(div) {    div.setAttribute('data-clicked',div.getAttribute('data-clicked')!='true'?'true':'false');    console.log(div.getAttribute('data-clicked'));}
function works(div) {    // console.log(div.style['background-color'])    if(div.style['background-color'] === "red"){      div.style['background-color'] = "green";    }    else {      div.style['background-color'] = "red";    }             }

div {  background: green;  width: 100px;  height: 100px;  margin: 20px;  display: inline-block;  border-radius: 1em;}div[data-clicked="true"] {  background: red;}

<div onclick="works(this)"></div><div onclick="doesntWork(this)"></div>

Specify multiple attribute selectors in CSS

Simple input[name=Sex][value=M] would do pretty nice. And it's actually well-described in the standard doc:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier.

JSFiddle Demo

CSS Data Attribute Conditional Value Selector