CODEWITHSUNDEEP
htmlcss
Muhammet Sinan Korkut
Muhammet Sinan Korkut

Reputation: 88

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

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 class="container">
      <div class="row">
          <div class="col-md-3 col-lg-3">
              <div class="aboutUsItem redBg">
                      <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
              <div class="aboutUsItem purpleBg">
                  <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
              <div class="aboutUsItem greenBg">
                  <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
              <div class="aboutUsItem orangeBg">
                  <p><i class="fa fa-check"></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>

Upvotes: 2

Views: 141

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 45963

You are making two mistakes:

  1. In your second css selection, it should be #aboutUs instead of #aboutUsItems.

  2. 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 class="container">
    <div class="row">
      <div class="col-md-3 col-lg-3">
        <div class="aboutUsItem redBg">
          <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
        <div class="aboutUsItem purpleBg">
          <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
        <div class="aboutUsItem greenBg">
          <p><i class="fa fa-check"></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 class="col-md-3 col-lg-3">
        <div class="aboutUsItem orangeBg">
          <p><i class="fa fa-check"></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>

Upvotes: 1

Substitute
Substitute

Reputation: 269

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.

Upvotes: 0

Related Questions