Значение CSS равно другому значению

Question

Мне интересно, существует ли поддерживаемый метод в CSS, чтобы проверить, соответствует ли значение атрибута значению другого атрибута. Например:

<div foo="value" bar="value"></div> 

Я бы искал что-то похожее на этот передовой селектор

div[foo=value][bar=value] { 
    font-size:16px; 
} 

Вместо того, чтобы вручную проверяя значение каждого из них, я ищу, чтобы просто увидеть, если они приравнивают, так что-то вроде

div[foo]==[bar] { 
    font-size:16px; 
} 

Я не знаю, как это сделать, а также не нашел методов поиска в Googlebox. Я подозреваю, что Javascript, вероятно, был бы способ пойти

Есть ли поддерживаемый метод для проверки этого?

Answer 1

В CSS нет такой опции. Вы не можете сравнивать значения атрибутов других элементов. Единственное, что вы можете сделать, это использовать JavaScript/jQuery или что-то на сервере.

Пример (JQuery):

if($('div.example').attr('foo') === $('div.example').attr('bar')) { 
    $('div.example').css('fontSize', '16px'); 
} 

Answer 2

CSS не имеет такой вариант.

Answer 3

CSS только не поможет здесь, вы можете использовать яваскрипт и дату-тег

https://jsfiddle.net/2weeqc42/

<div data-foo="foo" data-bar="foo">div content 1</div> 
<div data-foo="foo" data-bar="bar">div content 2</div> 

2 диву с тегами данных - в Div-значения являются одинаковым

$('div').each(function(){ 
    if ($(this).data("foo") === $(this).data("bar")){ 
     $(this).css("color","red"); // or do something else 
    } 
}) 

Я прохожу через div и проверяю, является ли содержимое тегов данных одинаковым - только первый цвет становится красным