Search code examples
css

Edit an element based on a sister element with CSS

I would like to replace the svg path in the html below if the uh-notification-badge class exists. I cannot change the html and I'd like to do it with CSS if possible.

<a href="/t5/notificationfeed/page" target="_self" data-testid="uh-notification-link" id="uh-notification-link" data-wat-loc="uh top-nav" data-wat-val="notification" aria-label="go to notifications">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" data-testid="notification" class="uh-notification-icon">
<path d="m16.2 11.9-.1-2.1c0-3.5-1.7-6.5-4.1-7.7V.6c0-.3-.3-.6-.6-.6H8.5c-.3 0-.6.3-.6.6v1.5c-2.4 1.2-4 4.3-4 7.7L3.8 12c-2.5 1-3 3.5-2.8 4.8 0 .3.3.5.6.5h5.2C7 18.8 8.4 20 10 20s3-1.2 3.3-2.7h5.2c.3 0 .6-.2.6-.5.1-1.3-.4-3.8-2.9-4.9M10 18.8c-1 0-1.8-.6-2-1.5h4c-.2.9-1 1.5-2 1.5m-7.8-2.7c.1-.9.4-2.5 2.4-3.2.2-.1.4-.3.4-.5l.1-2.6c0-3.2 1.5-5.9 3.7-6.7q.3-.15.3-.6V1.2h1.7v1.3c0 .2.2.5.4.6 2.2.8 3.7 3.6 3.7 6.8l.1 2.5c0 .2.2.5.4.5 2 .7 2.3 2.3 2.4 3.2z" style="fill: rgb(77, 77, 77);"></path>
</svg>
<div class="uh-notification-badge" data-testid="uh-notification-badge"></div>
</a>

Replacement svg path

d: path('m 16.2 11.9 l -0.1 -2.1 c 0 -3.5 -1.7 -6.5 -4.1 -7.7 V 0.6 c 0 -0.3 -0.3 -0.6 -0.6 -0.6 H 8.5 c -0.3 0 -0.6 0.3 -0.6 0.6 v 1.5 c -2.4 1.2 -4 4.3 -4 7.7 L 3.8 12 c -2.5 1 -3 3.5 -2.8 4.8 c 0 0.3 0.3 0.5 0.6 0.5 h 5.2 C 7 18.8 8.4 20 10 20 s 3 -1.2 3.3 -2.7 h 5.2 c 0.3 0 0.6 -0.2 0.6 -0.5 c 0.1 -1.3 -0.4 -3.8 -2.9 -4.9 M 10 18.8 c -1 0 -1.8 -0.6 -2 -1.5 h 4 c -0.2 0.9 -1 1.5 -2 1.5 z');
Solution

  • Although as @HaoWu has pointed out, some browsers allow the d in a path to be altered by CSS, at the time of writing Safari does not.

    This snippet therefore uses CSS by making the original path transparent (for which a !important is needed) and putting the new svg as a background to the original one.

    Like @HaoWu it uses a distinct path for the new SVG so we can be certain the change has been made.

    <p>WITH THE NOTIFICATION BADGE div</p>
<a href="/t5/notificationfeed/page" target="_self" data-testid="uh-notification-link" id="uh-notification-link" data-wat-loc="uh top-nav" data-wat-val="notification" aria-label="go to notifications">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" data-testid="notification" class="uh-notification-icon">
<path d="m16.2 11.9-.1-2.1c0-3.5-1.7-6.5-4.1-7.7V.6c0-.3-.3-.6-.6-.6H8.5c-.3 0-.6.3-.6.6v1.5c-2.4 1.2-4 4.3-4 7.7L3.8 12c-2.5 1-3 3.5-2.8 4.8 0 .3.3.5.6.5h5.2C7 18.8 8.4 20 10 20s3-1.2 3.3-2.7h5.2c.3 0 .6-.2.6-.5.1-1.3-.4-3.8-2.9-4.9M10 18.8c-1 0-1.8-.6-2-1.5h4c-.2.9-1 1.5-2 1.5m-7.8-2.7c.1-.9.4-2.5 2.4-3.2.2-.1.4-.3.4-.5l.1-2.6c0-3.2 1.5-5.9 3.7-6.7q.3-.15.3-.6V1.2h1.7v1.3c0 .2.2.5.4.6 2.2.8 3.7 3.6 3.7 6.8l.1 2.5c0 .2.2.5.4.5 2 .7 2.3 2.3 2.4 3.2z" style="fill: rgb(77, 77, 77);"></path>
</svg>
<div class="uh-notification-badge" data-testid="uh-notification-badge"></div>
</a>
<p>WITHOUT THE NOTIFICATION BADGE div
<p>
  <a href="/t5/notificationfeed/page" target="_self" data-testid="uh-notification-link" id="uh-notification-link" data-wat-loc="uh top-nav" data-wat-val="notification" aria-label="go to notifications">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" data-testid="notification" class="uh-notification-icon">
<path d="m16.2 11.9-.1-2.1c0-3.5-1.7-6.5-4.1-7.7V.6c0-.3-.3-.6-.6-.6H8.5c-.3 0-.6.3-.6.6v1.5c-2.4 1.2-4 4.3-4 7.7L3.8 12c-2.5 1-3 3.5-2.8 4.8 0 .3.3.5.6.5h5.2C7 18.8 8.4 20 10 20s3-1.2 3.3-2.7h5.2c.3 0 .6-.2.6-.5.1-1.3-.4-3.8-2.9-4.9M10 18.8c-1 0-1.8-.6-2-1.5h4c-.2.9-1 1.5-2 1.5m-7.8-2.7c.1-.9.4-2.5 2.4-3.2.2-.1.4-.3.4-.5l.1-2.6c0-3.2 1.5-5.9 3.7-6.7q.3-.15.3-.6V1.2h1.7v1.3c0 .2.2.5.4.6 2.2.8 3.7 3.6 3.7 6.8l.1 2.5c0 .2.2.5.4.5 2 .7 2.3 2.3 2.4 3.2z" style="fill: rgb(77, 77, 77);"></path>
</svg>
</a>
  <style>
    svg:has(+.uh-notification-badge) {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m0,0 h20 v20 h-20 z"  style="fill: rgb(255, 0, 0);"></path></svg>');
    }

    svg:has(+.uh-notification-badge)>path {
      fill: transparent !important;
    }
  </style>