How to have alternate colors in alternate rows-CodePudding

I am trying to do this hands-on project where I am not able to code alternate colors for rows as per the image attached below. There are total seven rows and I need white and grey as alternate colors. I went through few documentation but was unable to do so, below is my HTML and CSS code.

HTML I have seven rows as such

<!-------- [![enter image description here][1]][1]Row 1 ---------->
<div >
      <div id="main-container">
        <div>
            <h1>10.99</h1>
            <p>UDS/DAY</p>
            <br>
            <button>SELECT</button>
            <br>
            <P>Total 76.93 USD</P>
        </div>
        <div>
            <img src="./images/vehicles/car1.gif" />
            <p>Extra Small Car</p>
        </div>
        <div>
            <p><img src="./images/icon_man.gif">x 4 Passengers</p>
            <p><img src="./images/icon_sm_scase.gif">x 2 Small Suitcases</p>
            <p><img src="./images/icon_lg_scase.gif">x 0 Large Suitcases</p>
        </div>
        <div>
            <p>Automatic transmission</p>
            <p>Air Conditioning</p>
            <p>24 miles/gallon</p>
        </div>
    </div>
</div>

CSS This is my entire CSS

.container{
  margin-top: 1%;
}
#main-container {
  display: flex;
  background-color: rgb(248, 246, 246);
  align-content: center;
  justify-content: center;
  width: 65%;
  font-size: 2.vmin;
}
#main-container > div > img {
  width: 100%;
}
#main-container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#main-container > div:nth-of-type(1) {
  width: 15%;
}
#main-container > div:nth-of-type(2) {
  width: 25%;
}
#main-container > div:nth-of-type(3) {
  width: 30%;
}
#main-container > div:nth-of-type(4) {
  width: 30%;
}
#main-container div {
  align-items: center;
  width: 65%;
}
#main-container button {
  color: white;
  background-color: #117CC0;
  border: none;
  height: 38px;
  width: 90px;
}

#main-container h1 {
  text-align: center;
  font-size: 25PX;
}
p, h1 {
  margin: 0;
}

If someone can please help me how to do it and make me in understanding the logic

CodePudding user response：

you wanna try to add the following lines to the css like so. the pseudo-class counts the elements in the container and alternates as demanded.

#main-container div:nth-child(even) {
background-color: #ccc;
}

#main-container div:nth-child(odd) {
background-color: #fff;
}

you can as well alternate the p, then just change it where it says div, but make sure the elements are in the "alternating container".

CodePudding user response：

Try this:

.container{
  margin-top: 1%;
}
#main-container {
  display: flex;
  background-color: rgb(248, 246, 246);
  align-content: center;
  justify-content: center;
  width: 65%;
  font-size: 2.vmin;
}
#main-container > div > img {
  width: 100%;
}
#main-container > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#main-container > div:nth-of-type(1) {
  width: 15%;
}
#main-container > div:nth-of-type(2) {
  width: 25%;
}
#main-container > div:nth-of-type(3) {
  width: 30%;
}
#main-container > div:nth-of-type(4) {
  width: 30%;
}
#main-container div {
  align-items: center;
  width: 65%;
}
#main-container button {
  color: white;
  background-color: #117CC0;
  border: none;
  height: 38px;
  width: 90px;
}

#main-container h1 {
  text-align: center;
  font-size: 25PX;
}
p, h1 {
  margin: 0;
}
#main-container div:nth-child(even) {
background-color: #ccc;
}

#main-container div:nth-child(odd) {
background-color: #fff;
}

   

<div >
      <div id="main-container">
        <div>
            <h1>10.99</h1>
            <p>UDS/DAY</p>
            <br>
            <button>SELECT</button>
            <br>
            <P>Total 76.93 USD</P>
        </div>
        <div>
            <img src="./images/vehicles/car1.gif" />
            <p>Extra Small Car</p>
        </div>
        <div>
            <p><img src="./images/icon_man.gif">x 4 Passengers</p>
            <p><img src="./images/icon_sm_scase.gif">x 2 Small Suitcases</p>
            <p><img src="./images/icon_lg_scase.gif">x 0 Large Suitcases</p>
        </div>
        <div>
            <p>Automatic transmission</p>
            <p>Air Conditioning</p>
            <p>24 miles/gallon</p>
        </div>
    </div>
</div>