ShellZero ShellZero - 2 months ago 5
CSS Question

Adding CSS class selector to multiple HTML elements

This is a very simple question which has already been asked on Stack overflow a couple of times. But seems like, those answers are not helping me even though I tried the approach. According to me, it should work but it is not. I am not sure what silly mistake I am doing here. Please take a look.

HTML:

<div>
<a class="hello" href="www.google.com">BlahBlah</a>
<button class="hello">Hello</button>
</div>


CSS:

.hello button, .hello a {
border:none;
background-color: #47564;
&:focus {
outline: red solid 5px;
}
}


Here is the JS Fiddle: link

I am trying to overwrite the outline of the two elements,
a
and
button
with my style using the class hello. But when I tab focus over these elements, I still see the default browser's focus i.e., outline style by inspecting it in Chrome. I am unable to overwrite it. I'm not understanding if the problem is because of the way I'm using the selectors or simply my focus style.

Thank you!

Answer

A couple of mistakes you made :

  1. .hello button, .hello a instead of button.hello, a.hello
  2. Running SCSS code as CSS code
  3. Color name was missing a digit

Correct SCSS code would be something like this :

button.hello, a.hello {
  border:none;
  background-color: #F47564;
  &:focus {
    outline: red solid 5px !important;
  }
}

That would be converted to the following CSS :

button.hello, a.hello {
  border: none;
  background-color: #F47564;
}
button.hello:focus, a.hello:focus {
  outline: red solid 5px !important;
}

See also this Fiddle.