html – :nth-child doesn't work on element of same class name-ThrowExceptions

Exception or error:

I tried to select the first, 3rd and 5th element from the class name personal using :nth-child, but it doesn’t work. Is there any way to select those specific elements with the same name class? I already tried many ways to do it without success. I will appreciate if someone has a solution for it. Thanks

.personal:nth-child(1) {
      border:5px solid red;
      width:100%;
      display:block;
    }

.personal:nth-child(3) {
      border:5px solid red;
      width:100%;
      display:block;
    }
    
 .personal:nth-child(7) {
      border:5px solid red;
      width:100%;
      display:block;
    }
<div class="wrapper" id="content">
        <div class="title" style="font-size: 15px">Client info:</div>
        <div class="personal" style="font-size: 18px"><span>First name:</span><span>Paul</span></div>
        <div class="personal" style="font-size: 18px"><span>Last name:</span><span>Lee</span></div>
        <div class="personal" style="font-size: 12px"><span>Phone:</span><span>+61 7 3658 5544</span></div>
        <div class="instruction"><span><span class="data-img icon-important"></span></span><span class="comment" style="font-size: 12px">I don't require plastic cutlery.</span></div>
        <div class="title" style="font-size: 15px">Items:</div>
        <div>
            <div class="item" style="font-size: 18px">
                <div class="d-flex">
                    <div class="quantity">2x</div>
                    <div>Pizza Prosciutto</div>
                </div>
                <div>11.60</div>
            </div>
            <div class="instruction-small"><span class="center-horizontally"><span class="data-img icon-important"></span></span><span class="comment-small" style="font-size: 15px">No mushrooms, please!</span></div>
        </div>
        <div class="dotted-line taxes-total-separator"></div>
        <div class="personal" style="font-size: 15px"><span>Sub-total:</span><span>A$20.60</span></div>
        <div class="total" style="font-size: 15px"><span>Total in AUD:</span><span>A$20.60</span></div>
        <div class="title" style="font-size: 15px">Order details:</div>
        <div class="personal" style="font-size: 12px"><span>Number:</span><span>1</span></div>
        <div class="personal" style="font-size: 12px"><span>Placed at:</span><span>25 February, 2:12 am</span></div>
        <div class="personal" style="font-size: 12px"><span>Accepted at:</span><span>25 February, 2:13 am</span></div>
        <div class="personal" style="font-size: 18px"><span>Fulfillment at:</span><span>25 February, 3:13 am</span></div>
    </div>
How to solve:

You cant filter by class in CSS, there’s no :nth-of-class() selector. You can select direct child element of #content or create a custom class and assign that class to elements you want to apply extra styles.

#content>div:nth-child(2) {
      border:5px solid red;
      width:100%;
      display:block;
    }

#content>div:nth-child(4) {
      border:5px solid red;
      width:100%;
      display:block;
    }
    
#content>div:nth-child(7) {
      border:5px solid red;
      width:100%;
      display:block;
    }
<div class="wrapper" id="content">
        <div class="title" style="font-size: 15px">Client info:</div>
        <div class="personal" style="font-size: 18px"><span>First name:</span><span>Paul</span></div>
        <div class="personal" style="font-size: 18px"><span>Last name:</span><span>Lee</span></div>
        <div class="personal" style="font-size: 12px"><span>Phone:</span><span>+61 7 3658 5544</span></div>
        <div class="instruction"><span><span class="data-img icon-important"></span></span><span class="comment" style="font-size: 12px">I don't require plastic cutlery.</span></div>
        <div class="title" style="font-size: 15px">Items:</div>
        <div>
            <div class="item" style="font-size: 18px">
                <div class="d-flex">
                    <div class="quantity">2x</div>
                    <div>Pizza Prosciutto</div>
                </div>
                <div>11.60</div>
            </div>
            <div class="instruction-small"><span class="center-horizontally"><span class="data-img icon-important"></span></span><span class="comment-small" style="font-size: 15px">No mushrooms, please!</span></div>
        </div>
        <div class="dotted-line taxes-total-separator"></div>
        <div class="personal" style="font-size: 15px"><span>Sub-total:</span><span>A$20.60</span></div>
        <div class="total" style="font-size: 15px"><span>Total in AUD:</span><span>A$20.60</span></div>
        <div class="title" style="font-size: 15px">Order details:</div>
        <div class="personal" style="font-size: 12px"><span>Number:</span><span>1</span></div>
        <div class="personal" style="font-size: 12px"><span>Placed at:</span><span>25 February, 2:12 am</span></div>
        <div class="personal" style="font-size: 12px"><span>Accepted at:</span><span>25 February, 2:13 am</span></div>
        <div class="personal" style="font-size: 18px"><span>Fulfillment at:</span><span>25 February, 3:13 am</span></div>
    </div>

###

It works like this. You are telling it look for the .personal class.
List the siblings. In your case you have 15 siblings.
Now give me the 1 element and check if it is .personal, if so apply the styling.
In your case the first sibling is .title, it won’t apply it.
The third sibling is .personal, it will apply it.
The seventh sibling is nothing, it won’t apply it.
You should ask for nth-child(2), nth-child(4) and nth-child(14)

Leave a Reply

Your email address will not be published. Required fields are marked *