Get filter to NOT apply to nested pseudo elements

Question

I've been implementing email-style color coding for the borders of deeply nested quotes:

Technically, they're not borders per se but :before pseudo elements. And the 'footers' (the bits saying 'dennis on...') reside in :after:

blockquote {
  color: #424242;
  padding-left: 1rem;
  margin-left: 2px;
  position: relative;
}

/* This is how Stack Overflow does rounded corners
   for the left border, along with the relative
   positioning of the blockquote proper. */
blockquote:before {
  background: chocolate;
  border-radius: 8px;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  position: absolute;
  width: 3px;
}

/* 'Footer' with source information */
blockquote:after {
  content: '— ' attr(data-source) ' on ' attr(data-date);
  color: #007bff;
  font-style: italic;
  font-size: small;
}

The colors rotate programmatically, per this answer:

blockquote blockquote {
  filter: hue-rotate(307deg) saturate(2.5);
}

Here's the problem: I only intend for the rotation to apply to the 'borders' on the left, not the 'footers'. The 'footers' should render with their assigned color (#007bff, ie blue).

I have tried unsetting the filter on the :after:

blockquote:after {
  filter: none;
}

But this approach won't percolate to the deeply nested :afters. I've tried setting !important as well.

The 'best' I have come up with so far is resetting the rotation and saturation:

blockquote:after {
  filter: hue-rotate(0deg) saturate(0);
}

This does percolate (no clue why), but it results in the 'footers' being gray, which is better, but not the desired result. Again, I need the 'footers' to all be blue like the bottom-most one.

How to achieve this? Since the quoted text itself ('foo', 'bar', etc) isn't color coded, something is working right – I need to apply that to the footers as well.

EDIT: As requested, here's the HTML as well:

<blockquote data-source="dennis" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-425">
  <blockquote data-source="peter" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-424">
    <blockquote data-source="dennis" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-423">
      <p>foo</p>
    </blockquote>
    <p>bar</p>
  </blockquote>
  <p>baz</p>
</blockquote>

You could use the hue-rotate angle as 200, its on the middle, so it works like you need ``` filter: hue-rotate(200deg) saturate(2.5); ``` — João Deroldo, Aug 22 '23 at 19:37
@JoãoDeroldo Wouldn't the middle be 180? Either way, doesn't seem to work — Dennis Hackethal, Aug 22 '23 at 19:41
Just to make sure I understand the full requirement, have you chosen 307, ie coprime with 360, so that you can have 360 colors before they start repeating? — A Haworth, Aug 23 '23 at 05:14
The p element text is set to a grayish color which has hue and saturation values of 0 so your filter function makes no difference to it. — A Haworth, Aug 23 '23 at 06:58
@AHaworth No, I chose 307 because, having sampled various other degrees, that one results in neighboring colors sufficiently different from each other. That the colors don't repeat within at least ~five nested levels is sufficient. — Dennis Hackethal, Aug 23 '23 at 07:31

Temani Afif · Answer 1 · 2023-08-22T22:33:07.043

1

I will suppose that you have a max number of nesting and you can manually define each case.

I am using the trick from here: https://css-tip.com/hue-manipulation-color-mix/ then I manually calculate the hue angle each time.

blockquote {
  color: #424242;
  padding-left: 1rem;
  margin-left: 2px;
  position: relative;
  --color: chocolate; /* main color */
  /* the color after hue manipulation */
  --new-color: 
    color-mix(in hsl longer hue, 
      var(--color), var(--color) calc(var(--h)*1%/3.6)
  );
}

blockquote:before {
  background: var(--new-color);
  border-radius: 8px;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  position: absolute;
  width: 3px;
  filter:  saturate(2.5);
}

/* 'Footer' with source information */
blockquote:after {
  content: '— ' attr(data-source) ' on ' attr(data-date);
  color: #007bff;
  font-style: italic;
  font-size: small;
}

blockquote  {
  --h: 0; 
}
blockquote > blockquote {
  --h: 307; 
}
blockquote > blockquote {
  --h: 254; 
}
blockquote > blockquote > blockquote {
  --h: 201; 
}
blockquote > blockquote > blockquote > blockquote {
  --h: 148; 
}
blockquote > blockquote > blockquote > blockquote > blockquote {
  --h: 95; 
}

<blockquote data-source="dennis" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-425">
  <blockquote data-source="peter" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-424">
    <blockquote data-source="dennis" data-date="Aug 22, 2023 12:07 pm PDT" data-link="#message-423">
      <p>foo</p>
    </blockquote>
    <p>bar</p>
  </blockquote>
  <p>baz</p>
</blockquote>

edited Aug 22 '23 at 22:33

answered Aug 22 '23 at 22:20

Temani Afif

245,468
26
309
415

Thanks for introducing me to color-mix which I hadn’t used before. But in this case I’m not understanding why it’s needed - is there a reason for not dropping filter altogether and just defining —new-color as an actual color in each of the 5 levels? – A Haworth Aug 23 '23 at 04:48
"you have a max number of nesting" No, nestings need to be arbitrarily deep. But I suppose that, if we can get your solution to rotate somehow (using modulo?), then it might work. – Dennis Hackethal Aug 23 '23 at 07:36
@DennisHackethal I can implement a modulo but since it's a semi-manual solution I don't think it worth such complexity since we can easily calculate few angles manually and rapidly – Temani Afif Aug 23 '23 at 08:23
@AHaworth you can do that but the idea was to define the color once using any format then find some ways to calculate the new ones. – Temani Afif Aug 23 '23 at 08:24
Is there a way to get the solution to rotate? Otherwise anything deeper than 4 gets the same —h. Or have I misunderstood? – A Haworth Aug 23 '23 at 08:34
@TemaniAfif Wouldn't a modulo turn it from a manual into a programmatic solution? – Dennis Hackethal Aug 23 '23 at 21:54

Get filter to NOT apply to nested pseudo elements

1 Answers1