[CSS] Coloring the vertical bars to match each heading

I have assigned different colors to my headings and would like the vertical bars’ colors (that appear between expanded bullet points) to match the headings.

Vertical_Bars

To change the headings’ colors, i use this:

.is-heading1 .Node-renderedContent
{
  color:  red;
}
.is-heading2 .Node-renderedContent
{
  color:  green;
}
.is-heading3 .Node-renderedContent
{
  color:  blue;
}

I found a snippet to color all vertical bars in this theme: https://userstyles.org/styles/144225/dynalist-simple-colors-for-default-theme.

.is-currentRoot .Node .Node-children
{
  border-left: 1px solid purple;
}

But how can I restrict this modification to only affect each specific heading?

1 Like

+1 for that :smiley: I am interested as well, would be nice!

I dare to bump this once. :duck::dash:

It’s impossible to do this with CSS with the current html layout

Tanks! At least I have closure now… :wink: