###前提・実現したいこと
CSSのattr()を用いて、counter-incrementに任意の数値を加算したい。
JSを使用せずにHTMLとCSSのみで作りたい。
###発生している問題・エラーメッセージ
attr()部分が認識されずに、未記入のときの挙動(+1ずつ)をする
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>attr counter</title> 6 <style> 7 8 body{ 9 counter-reset: score; 10 } 11 12 input:checked{ 13 counter-increment: score attr(data-score integer); 14 } 15 16 span::before{ 17 content: counter(score); 18 } 19 20 </style> 21</head> 22<body> 23 24 <input type="checkbox" data-score="1"><label>+1</label><br> 25 <input type="checkbox" data-score="10"><label>+10</label><br> 26 <input type="checkbox" data-score="100"><label>+100</label><br> 27 28 <span>点</span> 29 30</body> 31</html>
###試したこと
以下のソースに書き換えたところ自分の考えている動きをしたものの、
ひとつひとつ設定する必要性があり、attrで解決できるならばしたいと考えている
CSS
1/* 2input:checked{counter-increment: score attr(data-score integer);} 3*/ 4 5input[data-score="1"]:checked{counter-increment: score 1;} 6input[data-score="10"]:checked{counter-increment: score 10;} 7input[data-score="100"]:checked{counter-increment: score 100;} 8
###補足情報
Chrome、Safariで動作しませんでした。
動作しない原因とソースの誤っている点を指摘していただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/30 16:06