0

First of all, I'm sorry if there is already a similar question that I ask, but it is not that easy to search for that specific case.

What I want to achieve, is coloring every "a" element, except those that are wrapped in a header element h1,h2,h3,h4,h5.

I'm aware of the parent selector, but I don't want to apply anything to the parent, but the child element I create the CSS rule for.

What I came up with so far was this:

a {

    & {
      background-color: yellow;
    }

    &:not(h1, h2, h3, h4, h5, h6) {

      @apply text-blue-600 break-words;

      & :hover {
        @apply text-blue-700;
      }
    }
  }

It seems to have no effect and applies the style to all "a" tags still, and the yellow background is applied to the "a" tag as well, which is the current element, not to the parent element, which is opposing to what I understood from the docs.

How do I create a correct selector based on what the parent of my "a" element is?

Marian Klühspies
  • 15,824
  • 16
  • 93
  • 136
  • nothing SASS can do. It would require a parent selector. The currently available parent selector is `:has()` which is only supported by chromium browser version 105 (Chrome: 30th August 22, Edge: 1st September 22), Safri at 15.4 (14th March 22) and by Firefox with Beta-Developer Tools activated since version 103 (26th July 22). So it is not ready for productive use. – tacoshy Sep 03 '22 at 12:56
  • @tacoshy thanks, good to know. So I guess one solution would be setting a global default and declaring overwrites for specific elements, such as h tags – Marian Klühspies Sep 03 '22 at 14:11

1 Answers1

1
a:not(h1>a, h2>a, h3>a){
  background-color: yellow;
  
  &:not(h1, h2, h3){
    color: DarkBlue;
    &:hover {
        color: blue;
      }
  }
}

My limited testing shows this scss does what I think you're aiming for. JSFiddle Demo
You'd have to edit it to include all headers and your own colours

Jess
  • 177
  • 5