CSS style is not applying to button in React component

Question

I have my CSS stylesheet in my index.html file where my React app is loaded. In here I have the following CSS values :

#Webshop {
      background-color: white;
      height: 100%;
      width: 100%;
}

and

#Webshop, button {
      position: relative
      border: 6px solid #232323
      z-index: 2
      padding: 12px 22px
      margin: 0 10px
      box-sizing: border-box
      font-size: 26px
      font-weight: 600
      text-transform: uppercase
      text-decoration: none
      color: #232323
}

Webshop is located in a different file that contains this Render method:

render() {
        return (
            <div className='Webshop' id='Webshop'>
                <li>
                    <img src="./products.jpeg" width="350" height="350"></img>
                    <button onClick={this.handleClick} className="addit">Add to cart</button>
                    <select id="size" onChange={this.change} value={this.state.value}>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        <option value="x-large">X-large</option>
                    </select>
                    <img src="./product.jpeg" width="350" height="350"></img>
                </li>
            </div>
        );
    }

For some reason the CSS applies to Webshop but not to the button. I have other Components in other files the work also. How can I get the CSS to apply to the button in the Render method?

Answer 1

Try applying button style separately. Currently the second style applies to #webshop and button as you separated them with comma, which is strange, why would you apply same styling to a div element and a button element? Try doing #webshop button or #webshop > button instead and applying button styles separately.

Also you are missing semicolons at the end of each property in the second style bit which is probably an issue here.

Answer 2

Check https://www.w3schools.com/cssref/css_selectors.asp

Right now you are applying

#Webshop, button {
  position: relative
  border: 6px solid #232323
  z-index: 2
  padding: 12px 22px
  margin: 0 10px
  box-sizing: border-box
  font-size: 26px
  font-weight: 600
  text-transform: uppercase
  text-decoration: none
  color: #232323
}

to all elements that either have Webshop id or are buttons,

it should look more like

#webshop button {
  ...
}

Answer 3

The first two are critical, the last two are advices.

1. remove the comma like so:

#Webshop button {
  ...
}

2. CSS semicolons are a must, while in JavaScript you can omit them, which is being encouraged to do so in Standard.js rules.

3. The img tags should be self-closing like so: <img /> . In fact any element without a text within them should follow as well.

4. Avoid using IDs in your CSS. Read more about CSS Specificity .