0

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>
Tiago Machado
  • 9
  • 1
  • What do you want to highlight? I mean which on which elements you want to apply those CSS – Kiran Shinde Feb 25 '20 at 04:17
  • I think this will help somewhat why doesn't it work https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector – Prakhar Londhe Feb 25 '20 at 04:20
  • Does this answer your question? [nth-child doesn't respond to class](https://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class) – Abdelrahman Gobarah Feb 25 '20 at 04:37

2 Answers2

-1

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>
waqas Mumtaz
  • 689
  • 4
  • 12
-2

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)

Kenyi Larcher
  • 282
  • 1
  • 8