マストドンのトゥートを時間ごとに背景色分けするCSSとか

time-bakcground-extention.scss

/* 
  .column:nth-child(4): LTLのカラム(人によってUI違うっぽいので適宜調整)
  .column:nth-child(4) article[aria-posinset][data-id]: LTLの中のトゥートのwrap
　　.column:nth-child(4) article[aria-posinset][data-id] time: その中の時間
 */

/* トゥートのwrapをrelativeにする(多分いらない) */
.column:nth-child(4) article[aria-posinset][data-id] {
    position: relative;
}

/* 時間要素を背景に持ってくるためにabsoluteにして，右上に持ってきて，relative指定したwrapに対して縦横100%にする */
.column:nth-child(4) article[aria-posinset][data-id] time:before {
    content: ""; /* before要素をDOM上に出現させるために必要 */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    z-index: -1;
}

/* datatime「*=」00 => 00に部分一致するところだけに適応できる(どっかが一致すればOK) */
/* 部分一致とか前方一致とかを駆使して並べてやっていく(参考: https://qiita.com/shuhei/items/0d8d925acd48afefdb57) */
/* 以下は任意の時の0~5分までのトゥートの背景を青にする */
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":00:"]:before,
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":01:"]:before,
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":02:"]:before,
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":03:"]:before,
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":04:"]:before,
.column:nth-child(4) article[aria-posinset][data-id] time[datetime*=":05:"]:before{
    background-color: blue !important;
}