CODEWITHSUNDEEP
htmlcsscss-selectors
tim_woods
tim_woods

Reputation: 417

Html and CSS: Unable to Change Background Color of Container

I am trying to change the background color of the header where it says className="NetworkListHeader", but the color is not changing. I want the top portion of the container to be a different color than the body of the container.

HTML code:

class UserNetwork extends Component{

    render(){
      return(
        <div className="UserNetworkContainer">
                <div className="NetworkListHeader">
                  <h2>Your Network</h2>
                </div>
                <div><li>Object 1</li></div>
                <div><li>Object 2</li></div>
                <div><li>Object 3</li></div>
          </div>
      )
    }
};

export default UserNetwork;

CSS code:

.UserNetworkContainer{
  padding: 10px;
  position: absolute;
  border-radius: 7px;
  top:23%;
  right: 73%;
  width:23%;
  height: 50%;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0px 1px 12px 1px rgba(0, 0, 0, 0.17);
}

.NetworkListHeader{
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #2C3E50;
  font-size: 15px;
  margin-left: 70px;
  margin-top: 16px;
  background-color: blue;
}

Upvotes: 0

Views: 179

Answers (1)

Johannes
Johannes

Reputation: 67776

The header is in an h2 tag inside that div, so use this selector for your CSS rule:

.NetworkListHeader > h2 {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #2C3E50;
  font-size: 15px;
  margin-left: 70px;
  margin-top: 16px;
  background-color: blue;
}

Upvotes: 1

Related Questions