「CSS入門」複数の属性セレクタを指定するサンプル

説明
カスタムデータ属性 任意のhtmlの要素に接頭語「data-」で始まる属性値を付与する

1.複数の属性の定義

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
div[data-color="green"][data-size="small"] {
background-color:LightSkyBlue;
font-size: 15px;
}
</style>
<style> div[data-color="green"][data-size="small"] { background-color:LightSkyBlue; font-size: 15px; } </style>
<style>
div[data-color="green"][data-size="small"] {
     background-color:LightSkyBlue;
      font-size: 15px;
}
</style>

2.JSコード
var dataCcolor = 'xxx’;
var dataSize = 'xxx’;

$('div[data-color="' + datCcolor + '"][data-size="' + dataSize + '"]’).show();

CSS

Posted by arkgame