How to make select child div with nth-child in CSS?-CodePudding

I want to select the .aboutUsItem inside the #aboutUs. What did I do wrong ? This is my code:

#aboutUs .aboutUsItem {
    background-color: #e18686;
    padding: 30px;
    text-align: left;
    min-height: 362px;
    margin-top: 40px;
    border-radius: 65px 18px 65px 18px;
}
#aboutUsItems .container .row .col-md-3 >.aboutUsItem:nth-child(2) {
    border-radius: 0px;
}

<section id="aboutUs">
  <div >
      <div >
          <div >
              <div >
                      <p><i ></i></p>
                      <p><strong>7/24 Teknik Destek</strong></p>
                      <p>
                          Sadece Ticimax'ta olan 7/24
                          telefon ve ticket desteği ile
                          kesintisiz hizmet alın. Ticimax
                          Akademi'de her hafta ücretsiz
                          sınıf ve uygulamalı eğitimlerimize katılın.
                      </p>
              </div>
          </div>
          <div >
              <div >
                  <p><i ></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
          <div >
              <div >
                  <p><i ></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
          <div >
              <div >
                  <p><i ></i></p>
                  <p><strong>7/24 Teknik Destek</strong></p>
                  <p>
                      Sadece Ticimax'ta olan 7/24
                      telefon ve ticket desteği ile
                      kesintisiz hizmet alın. Ticimax
                      Akademi'de her hafta ücretsiz
                      sınıf ve uygulamalı eğitimlerimize katılın.
                  </p>
              </div>
          </div>
      </div>
  </div>
</section>

CodePudding user response：

You are making two mistakes:

In your second css selection, it should be #aboutUs instead of #aboutUsItems.
You would wanna select the second .col-md-3 and change its .aboutUsItem.

#aboutUs .aboutUsItem {
  background-color: #e18686;
  padding: 30px;
  text-align: left;
  min-height: 362px;
  margin-top: 40px;
  border-radius: 65px 18px 65px 18px;
}

#aboutUs .container .row .col-md-3:nth-child(2) .aboutUsItem {
  border-radius: 0px;
}

<section id="aboutUs">
  <div >
    <div >
      <div >
        <div >
          <p><i ></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p><i ></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p><i ></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
      <div >
        <div >
          <p><i ></i></p>
          <p><strong>7/24 Teknik Destek</strong></p>
          <p>
            Sadece Ticimax'ta olan 7/24
            telefon ve ticket desteği ile
            kesintisiz hizmet alın. Ticimax
            Akademi'de her hafta ücretsiz
            sınıf ve uygulamalı eğitimlerimize katılın.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

I'm not sure exactly what the question is; However, I do see in your CSS,

#aboutUs .aboutUsItem {
    background-color: #e18686;
    padding: 30px;
    text-align: left;
    min-height: 362px;
    margin-top: 40px;
    border-radius: 65px 18px 65px 18px;
}
#aboutUsItems .container .row .col-md-3 >.aboutUsItem:nth-child(2) {
    border-radius: 0px;
}

Where you refer to aboutUsItems by element id in the second declaration, while in the first declaration you refer to it by CSS class name (.aboutUsItem vs #aboutUsItems) which could be your issue.

I also don't see any usage of the aboutUsItems id in your HTML.