Adding CSS class selector to multiple HTML elements

Question

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.

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

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

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!

background-color: #47564;is an invalid color code and therefore won't have any effect (should have 6 characters, not 5) — Johannes
– Johannes, Commented Sep 19, 2016 at 16:24
This is SASS or SCSS or something else, not actually direct CSS. You need to add that tag. — Rob
– Rob, Commented Sep 19, 2016 at 16:37

John Slegers · Accepted Answer · 2016-09-19 16:40:37Z

3

A couple of mistakes you made :

.hello button, .hello a instead of button.hello, a.hello
Running SCSS code as CSS code
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;
}

Comments

Asaf David · Accepted Answer · 2016-09-19 16:23:50Z

3

place tags first, and remove spaces when referring to same element.

If you're writing scss, then:

button.hello, a.hello {
    border:none;
    background-color: #475644;

    &:focus{
        outline: red solid 5px;
    }
}

If you're writing plain css:

button.hello, a.hello {
    border:none;
    background-color: #475644;
}

button.hello:focus, a.hello:focus{
    outline: red solid 5px;
}

answered Sep 19, 2016 at 16:23

Asaf David

3,3172 gold badges25 silver badges41 bronze badges

Comments

Quentin · Accepted Answer · 2016-09-19 16:27:08Z

3

A space in a selector is a descendant combinator. It means "Match the selector on the right hand side if it is a descendant of something matched by the left hand side".

The link is not its own parent or grandparent.

Remove the space. When you do that, the type selector must be the first part of the selector (since it is not distinguished by a special character).

button.hello, 
a.hello {

answered Sep 19, 2016 at 16:27

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

hamidrun · Accepted Answer · 2016-09-19 16:31:54Z

-1

.hello {
  border:none;
  background-color: #e7e7e7;
  color: #333
}
.hello:hover {
  outline: red solid 5px !important;
}
a {
  text-decoration: none;
  }

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

answered Sep 19, 2016 at 16:31

hamidrun

256 bronze badges

Collectives™ on Stack Overflow

Adding CSS class selector to multiple HTML elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related