CODEWITHSUNDEEP
htmlcsssasscss-selectors
ShellZero
ShellZero

Reputation: 4661

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.

.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!

Upvotes: 1

Views: 295

Answers (4)

John Slegers
John Slegers

Reputation: 47091

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.

Upvotes: 3

hamidrun
hamidrun

Reputation: 25

.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>

Upvotes: -1

Quentin
Quentin

Reputation: 943564

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 {

Upvotes: 3

Asaf David
Asaf David

Reputation: 3297

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;
}

Upvotes: 3

Related Questions