Can you use a dot in a class name? Cos the buttons aren't picking up the CSS in this example.

Question

Hi guys,

I've followed the React Basics Project video exactly but I can't get the buttons to style correct like in the video. It might have something to do with the dot in the classNames="counter-action.decrement" and "counter-action.increment".

Here's the code in JSX

<div className="player-score">
    <div className="counter">
        <button className="counter-action.decrement"> - </button>
        <div className="counter-score"> 9 </div>
        <button className="counter-action.increment"> + </button>
    </div>
</div>

And here's the CSS in the example.

  .counter-action {
    border: none;
    font-weight: bold;
    color: #FAFAFA;
    display: block;
    padding: 20px 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .counter-action.increment {
    background-color: #66BB6A;
  }

  .counter-action.increment:hover {
    background: #549d59;
    cursor: pointer;
  }

  .counter-action.decrement {
    background: #ef5350;
  }

  .counter-action.decrement:hover {
    background: #c44442;
    cursor: pointer;
  }

The buttons don't seem to be picking up the CSS. Is there anything I'm missing?

I tried changing the class names to "counter-action decrement" and then reflected the change in the CSS as well. When I do that, it works and looks like the example.

But yeah. when I follow the example's syntax, it doesn't.

Any ideas?

Cheers Sanny

Answer 1 · 2017-07-07T10:53:51Z

July 7, 2017 10:53am

I just checked the videos and there are no dots in the classNames "counter-action increment" or "counter-action decrement" in the video's examples. So just remove the dots.

Answer 2 · 2017-07-07T11:59:41Z

July 7, 2017 11:59am

Hi Sanjeev—

Short answer: no. You'll want to remove those dots or replace them with something else.

Longer answer...

A dot within a CSS selector would actually be used to match an item that has both classes, for example:

.counter-action.decrement {...}

Is looking for an element that has both the .counter-action and the .decrement classes.

Welcome to the Treehouse Community

Looking to learn something new?

Sanjeev Veloo

Sanjeev Veloo

Can you use a dot in a class name? Cos the buttons aren't picking up the CSS in this example.

2 Answers

Ella Ruokokoski

Ella Ruokokoski

Tim Knight

Tim Knight

Paul Thompson

Paul Thompson