How to target a tag using a class name in SCSS

Question

I have an HTML element as follows

<a class="button">Click</a>

In my .scss file i have the following code.

.button{
  & a{
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

The above code does not work.

I tried searching for terms such as "targeting sibling class using css" but the results show for scenarios as given below.

<a>
  <span class="button">Click</span>
</a>

How do i target the a tag using the button class ?

Update :

I am not trying to target the parent element. I need to target the element which has the particular class is used.

There is no way to get parent class based on child class in CSS/SCSS. you have to go with the javascript approach. — Dhruvi Makvana, Nov 19 '20 at 11:57
Change the first line to `a.button {` and remove the second line — Guy Incognito, Nov 19 '20 at 11:57
I am not trying to target the parent. I need to target the element which has the particular class — Muljayan, Nov 19 '20 at 12:17
@Muljayan: thats SASS basics and misunderstanded how SASS working, what `&` mean and CSS basics that you aren't able to target parent element (your question: `How do i target the a tag using the button class ?`). Check out CSS/SASS begin tutorials. — pavel, Nov 19 '20 at 12:20

score 0 · Answer 1 · answered Nov 19 '20 at 11:55

tag name followed by selector(class or id) name like a.class_name, div.class_name or a#class_name, div#class_name

div.button{  /* tag name followed by selector(class or id) name*/)
  &>a{ /*will select only direct '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}


div.button{  /* tag name followed by selector(class or id) name*/)
  & a{ /*will select only all '<a> tags' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

div.button{  /* tag name followed by selector(class or id) name*/)
  & a.link{ /*will select only '<a> tags with classname link' inside div.button */
    color:red;
    
    &:hover,
    &:visited{
      color:blue;
    }
  }
}

<div class="button"><a class="link" href=""></a></div>

How to target a tag using a class name in SCSS

1 Answers1