カレンダーアプリなどで、以下のソースが吐き出されることがある
土日だけセルの色をcssで変えたい時、上記のようなソースコードの場合、どこにCSSを当てればいいのか、そういう案件があったので調べた
＜サンプル＞
…
article::before {
content: attr(data-parent);
}
とか
article[data-columns=”3″] {
width: 400px;
}
article[data-columns=”4″] {
width: 600px;
}
のように行う
以下のように２０２４年1月3日のセルの色を変えたい時は
dt[data-mec-cell=”20240103″] {
background-color: #ddd;
}
のように指定すれば、特定の日付にCSSをあてることができる
データ属性の使用 - ウェブ開発を学ぶ | MDN
HTML5 (en-US) は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性やDOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。
developer.mozilla.org
