title: CSS selector ::selection is not using given background color
body: <p>I am trying to make some RGB text, and that works, however when I am trying to make a <code>::selection</code> then it will hide the text, and will for some reason take the background color of the text. I have tried anything I can think of, for now, I am making it for chrome and will later work on firefox.</p>
  <h1>Research</h1>
  <p>In my research, I have found that you do not need to use a selector like <code>.rgb</code>. While looking into some documentation/examples, I have encountered multiple weird things, like when I was using <code>.rgb::selection</code> I could not higlight/select ANY text on the screen.</p>
  <p>when I looked into W3schools they simply use</p>
  <pre class="lang-css prettyprint-override"><code>::selection {
    color: red;
    background: yellow;
  }
  </code></pre>
  <p>and it works. Ive asked my teachers, and my peers. What none of them understand is why the <code>::selection</code> is taking the animate property. What I have thought is that when I use <code>-webkit-background-clip</code> that is what is making it not work properly. If this is the case then how can I make it so that it still takes it. When I read some more, I tryed to use <code>!important</code>, this was the closest that I got. It made the text white, but the color was still changing in the background. I've looked <a href="https://www.w3schools.com/css/css_important.asp" rel="nofollow noreferrer">here</a> to try to learn how i can use it properly, but i think I have used it correctly. I just cant seem to get the background color to stay one color.</p>
  <p>This is what I have gotten so far.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');
  
  * {
      margin: 0;
      padding: 0;
      background-color: #1e1e1e;
      font-family: 'Montserrat', sans-serif;
  }
  
  .rgb
  {
    position:fixed;
    background: linear-gradient(to right, #008AFF, #00FFE7);
    animation:animate 10s forwards infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  ::selection !important{
      background: red;
      color: white;
  }
  
  @keyframes animate
  {
    0%, 100%
    {
      filter:hue-rotate(0deg);
    }
    50%
    {
      filter:hue-rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 class="rgb"&gt;Welcome to my webpage&lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've looked all over this site for something or someone with this problem but it seems I'm a first.</p>