CSSで複数の属性セレクタを指定する

CSSで属性セレクタを指定する。

属性が一つの場合

div[data-color="red"]{
    background-color: red;
}

属性が2つの場合

div[data-color="red"][data-size="small"]{
    background-color: red;
    font-size: 10px;
}

JSでも使える

var colorVal = 'red';
var sizeVal = 'small';

$('div[data-color="' + colorVal + '"][data-size="' + sizeVal + '"]').show();