Home / Questions / 456982
Accepted
zerokira
Asked: 2022-06-03 11:57:55 +0800 CST 2022-06-03 11:57:55 +0800 CST

Add CSS styling to a certain child element

  • 772

I am trying to make the PINK color only apply up to the 7 div element that contains the children class, I had thought of a :nth-child but I have not been able to implement it

.padre .children {
    width: 200px;
    height: auto;
    border: 1px solid;
    margin-bottom: 10px;
    padding: 10px;
    background-color: red;
    
  }

.padre .children *.children:last-of-type {
  background-color: pink;
}
<div class="padre">
  <div class="children">
    <div class="children">
      <div class="children">
        <div class="children">
          <div class="children">
            <div class="children">
              <div class="children">
                <div class="children">
                  <div class="children">
                    <div class="children">
                      <div class="children">
                        <div class="children"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

html

3 Answers

  1. Best Answer

    Turning the reasoning around a bit, what you can do is make all the elements .childrenpink and create a specific rule so that from the eighth they turn red.

    To do this, you can use the selector >to refer to the direct descendant until you reach the descendants of the seventh .children.

    .padre .children {
  width: 200px;
  height: auto;
  border: 1px solid;
  margin-bottom: 10px;
  padding: 10px;
  background-color: pink;  
}
  
.padre > .children > .children > .children > .children > .children > .children > .children .children {
  background-color: red;
}
    <div class="padre">
  <div class="children">
    <div class="children">
      <div class="children">
        <div class="children">
          <div class="children">
            <div class="children">
              <div class="children">
                <div class="children">
                  <div class="children">
                    <div class="children">
                      <div class="children">
                        <div class="children"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    • 4

  2. Taking into account answer number 2, you could avoid the .children by placing

    .padre .children {
  width: 200px;
  height: auto;
  border: 1px solid;
  margin-bottom: 10px;
  padding: 10px;
  background-color: pink;
}

.padre > * > * > * > * > * > * > .children * {
  background-color: red;
}
    • 1

  3. Do you have possibility to add an additional class to the elements that you don't want PINK to be applied to? You could do the following:

      .padre .children div:not(.no) {
     background-color: pink;  
   }

    Adding the "no" class to divs you don't want to paint.

    • 0