Using :nth-child on elements with the same class name does not produce the desired result

I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I have exhausted several approaches without success and would greatly appreciate any guidance or solution. Thank you.

.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>

htmlcss

Answer №1

When it comes to CSS, filtering by class can be a bit tricky as there is no :nth-of-class() selector available. However, you do have the option to target direct child elements of #content or you can create a custom class and apply it to specific elements in order to add additional 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>

Answer №2

Here's how it goes down. You specify to search for the .personal class within the siblings of an element. In this scenario, there are 15 siblings. Then you pinpoint the first sibling and determine whether it has the .personal class; if it does, then the styling is applied. For example, in this situation, the first sibling is .title, so the styling won't be applied. However, the third sibling is .personal, so the styling will be applied. The seventh sibling doesn't have any specific style applied to it. It would be wise to request styles for nth-child(2), nth-child(4), and nth-child(14).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deactivate the child division by the nth parent division

At the end of my question, I have included a dynamically created div structure with the id "forth-three-one". Now, I need to find a way to disable or hide the input inside this specific div. Directly using the id "forth-three-one" is not an option as it w ...

jqueryhtml

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

htmlcssgoogle-chromeoutlook-web-app

Why won't my Nivo Slider images print? How can I make my Nivo Slider images appear on printouts?

I am having trouble printing the nivo slider (default-theme): Despite trying for a few days, I still can't figure out why it's not working. I have attempted solutions like #slider { visibility: visible; width: 950px; height: 35 ...

jquerycssprintingslidernivo-slider

Toggle the panel upwards using jQuery's slideToggle function

Looking to create an expandable footer triggered by a click on the '+' sign... Initially, the footer will display basic copyright information and social media links. Upon clicking the sign, I want a sitemap and additional content to slide above t ...

jqueryhtmlslidetoggle

Mobile WEBSITE Development with Ionic Framework

Exploring the potential of utilizing the Ionic Framework for my mobile website has piqued my curiosity. Are there any concerns I should be aware of when running Ionic Framework on mobile browsers? My plan is to leverage the framework's CSS and JS capa ...

angularjshtmlmobileionic-frameworkmobile-website

What are the best ways to utilize dynamic CSS on a smartphone browser for optimal performance?

Struggling to optimize my web application for mobile devices, I've encountered challenges with consistent display across different browsers. My idea is to utilize device capability detection to adjust widths and font sizes dynamically based on screen ...

asp.netiphonecssblackberrymobile

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Attempting to input data into elements that have been generated automatically

Trying to set values to elements with automatically generated id's: This code is functional: <input type="tekst" id="<?php echo $item->getId();?>"> <script> document.getElementById("<?php echo $item->getId();?>").v ...

javascriptphphtmlmysqldatabase

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Monitoring page reload with JavaScript

Here is an example of tabbed content: <div class="tab"> <button class="tablinks" onclick="openCity(event, 'NewYork')" id="defaultOpen">New York</button> <button class="tablinks" onclick="openCity(event, 'LosAngeles& ...

javascripthtml

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

javascriptcssnode.jsnext.jssass

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

htmlcsscss-variables

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...

htmlcssvue.jsnuxt.jsbootstrap-vue

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...

javascripthtmlcss

Use a JavaScript function on identical IDs

Can someone please help me figure out how to hide multiple divs with the same id using JavaScript? I attempted the following: <script> function filterfunc() { if(document.getElementById('filter_deductible').value == 'id_50'){ ...

javascripthtml

When the browser is resized, elements do not change position

I am attempting to build a website with solely horizontal scrolling. Check out this demo for reference. My issue arises when I resize the browser, as the content (paragraph within the light yellow box) fails to reposition itself. Ideally, I would like that ...

htmlcsspositioningcss-positionhorizontal-scrolling

Incorporating outside content into HTML

Currently, I am working on a project at my job which requires me to create a comprehensive help file with multiple chapters and extensive text all within one large HTML file. However, as the text will need to be translated into different languages, I am lo ...

javascriptjqueryhtml