CSS Comparison Operators

Question

I need to target divs that takes up more than 80% of their parent div, for a progress bar. Considering that we can target a specific width with CSS:

[data-width=80]

How might we target a comparison? This did not work in Firefox or Chrome:

[data-width>=80]

A google search for css comparison operators surprisingly did not turn up anything useful or relevant.

Note that I am targeting a data-* property, which I set together when setting the width in Javascript. Obviously I could just have the Javascript write an over80 class and target that, but there are additional concerns for which I need the targeting done in CSS. For one reason, it is the designer's job to decide at which width the change occurs. For another reason, we are targeting multiple devices, not just desktop web browsers.

Here is the target HTML and the CSS:

<div id='progress-bar-outer'>
    <div id='progress-bar-inner'><span id='percent-indicator'>60%</span></div>
</div>

#progress-bar-outer {
    overflow-y: auto;
    height: auto;
    border: #2072a7 solid 3px;
    position: relative;
}

#progress-bar-inner {
    float: left;
    height: 25px;
    background-color: #2072a7;
    width: 60%;
}

#progress-bar-inner[data-width<80] {
    position: relative;
}

#percent-indicator {
    position: absolute;
    top: 5px;
    right: 10px;
}

Answer 1

这是一个经常被问到的问题,但答案仍然是相同的:CSS不提供带数值运算的属性选择器.

现有的属性选择器都不适用于任何类型的值语义; 它们只将值视为原始字符串,因此最多只存在基本的字符串匹配属性选择器.下一个选择器规范Selectors 4似乎也没有引入任何数值属性选择器,但由于它仍处于开发的早期阶段,如果您能够提供一些好的用例示例,则可以提出此功能.

在一个有点相关的说明中,给定的例子[data-width=80]是无效的,因为以数字开头的标记在CSS中被解释为数值或维度,而CSS属性选择器只接受值组件中的字符串或标识符,而不是数字或尺寸.如果这样的特征使其成为选择器4,则可以解除该限制.

如果我们要谈论关注点的分离,可以争辩说,为表达值设置数据属性,例如width,特别是为了RWD,本身就是值得怀疑的.这个问题最明智的解决方案是元素查询,但目前尚不存在(据我所知,这主要是因为它们很难正确实现).

在这一点上,你最好的选择是JavaScript,真的.