One of the styles doesn't work but the other do

Question

I am making a web page to play a game. It uses two containers (inside a component). They show 2 images but by default they are empty. I apply one style to them: img-container which set the dimentions and color the background (it must be black), but the style doesn't work, although all other styles do.

Clarifications: At start, the div uses 2 classes (img-container and flex-child, which works fine). Also, I am working with Visual Studio Code.

I already try: change class name, reboot the host (closing VS Code an using 'npm start'), using another web browser (chrome and firefox) and change property values for bigger ones. This doesn't work but insert the properties in preexisting CSS classes and call they do.

Component code:

 import React, { Component } from 'react'; //Class component class PPT extends Component { render() { return ( <div id = "PPT"> <h3 id="explanation">¿Cómo se juega? </h3> <div id="container" className="flex-parent"> <div id="player_hand" className="flex-child"> <h2>Jugador</h2> <div className="img-container"></div> </div> <div id="computer_hand" className="flex-child"> <h2>Computadora</h2> <div className="img-container"></div> </div> </div> </div> ) } } export default PPT;

CSS style:

 #PPT { margin-top: 90px; margin-bottom: 15px; } #img-container { background-color: #262626; width: 474px; height: 266px; }

Answer 1

The wrong part is this section in your JSX:

className="img-container"

since you are using className you have to provide a class in your related css file for it, like below:

.img-container {
  background-color: #262626;
  width: 474px;
  height: 266px;
}

You are selecting your element in a wrong way!

Answer 2

You are using #img-container while you must use .img-container because it's a class. I also suggest that you remove that hyphen(-) and use an _ instead to maintain proper naming convention of classes in react and to also respect lint rule as your approach will show a warning in some editors. At the end your class name must look like img_container in jsx and like this .img_conatiner in css.

Answer 3

In CSS, # is an ID selector, while . is a class selector. So, to target an element with class name img-container , you should use .image-container , and not #img-container .