Strange outcomes observed with CSS Selector nth-child

When utilizing the CSS nth-child selector, I am encountering some peculiar issues.

The HTML structure is as follows:

<div class="block feature-callout-c" id="overview">
   <div class="row">
        <div class="span twelve">

            <span class="intro">ABCD</span>
        </div>
    </div>
    <div class="row number">
        <div class="span two">&nbsp;</div>
        <div class="span two data-stat">
            <i class="text">500M</i>
            <p><span class="faux-tip">Tweets</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">20M+</i>
            <p><span class="faux-tip">Blog Posts</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">200M</i>
            <p><span class="faux-tip">bitly Clicks</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">85M</i>
            <p><span class="faux-tip">Tumblr Posts</span></p>
        </div>
        <div class="span two">&nbsp;</div>
    </div>
</div>

The issue arises when using the following CSS code that fails to select anything:

DIV.block.feature-callout-c#overview:nth-child(2) 
    DIV.row.number:nth-child(2) 
        DIV.span.two.data-stat:nth-child(1) 
            I.text

However, this CSS selection works correctly:

DIV.block.feature-callout-c#overview:nth-child(2) 
    DIV.row.number:nth-child(2) 
        DIV.span.two.data-stat:nth-child(2) 
            P 
                SPAN.faux-tip

Can someone shed light on what might be causing this inconsistency?

This approach with CSS selectors may not be the most efficient. I have a specific requirement that demands a unique selector for each element.

htmlcsscss-selectors

Answer №1

Each segment of 

div.span.two.data-stat:nth-child(1)
corresponds to a specific part of the element it is comparing against, creating an overall "and" condition.

In simple terms, :nth-child(x) identifies an element as the xth child within its parent.

Therefore, 

div.span.two.data-stat:nth-child(1)
essentially means "Locate all elements with the tag name div, containing classes 'contains', 'two', and 'data-stat', positioned as the first child within their respective parents."

The initial child of DIV.row.number:nth-child(2), which you are attempting to correlate with 

DIV.span.two.data-stat:nth-child(1)
, lacks the data-stat class, leading to a mismatch.

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

Tips on creating a "CSS3 blink animation" using the visibility attribute

I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop. According to CSS specifications, the "visible" property is ...

cssvisibilitycss-animationskeyframe

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

Setting the flex-direction for <td> elements: A helpful guide

This is a snippet from the render function of one of my components, showcasing a table: return ( ... <td> <div style={{ width: '100%' }}>50</div> {' '} <span clas ...

htmlreactjscssflexbox

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

javascriptjqueryhtmliframe

Bootstrap 5 - Achieve automatic column width within a row

In my Bootstrap 5 setup, I have a variety of pages that have different column layouts - sometimes 2 columns, sometimes 3. The template system I'm using dynamically adjusts the layout to accommodate the need for a third column when necessary. <div ...

htmlcssbootstrap-5

Detect if the user is using Internet Explorer and redirect them to a different

My web application is having trouble rendering in Internet Explorer. In the meantime, I would like to detect if the user is using IE and redirect them to a different page specifically for IE visitors. What is the best way to accomplish this? Should I use ...

phpjavascripthtmlcss

Can someone guide me on how to retrieve data from a MUI table within a React project

Currently, I am retrieving data from a server in JSON format and looping through this data to display specific information. Everything is functioning as expected, but I'm encountering an issue with a Popover element that contains items with onclick ev ...

javascripthtmlreactjsjsonmaterial-ui

Alignment in rows with a flexible number of rows

My goal is to create a series of equally sized elements with consistent spacing. I want these elements to be evenly distributed both horizontally and vertically on the page, adjusting accordingly to changes in screen size or number of elements. The challen ...

htmlcss

What is the best way to remove input focus when clicked away?

I am in the process of developing an application using next js, and I need assistance with designing a search field. The primary functionality I am looking to implement is displaying search suggestions when the user starts typing, but hiding them when the ...

javascriptcssreactjsnext.js

The footer is refusing to show up at the bottom of the page

Why is my footer floating in the middle of the page? It's driving me crazy. I really hope it's a quick fix. I've searched online and all the solutions point to having a fixed footer, but I don't want that because it looks bad on smaller ...

htmlcssfooter

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

I'm experiencing difficulty positioning my iframe within its section container as it appears to be placed outside of it

I'm struggling to understand why my iframe is positioned outside of the designated section. Check out my GitHub Pages site here and view the repository here. Any assistance would be greatly appreciated! https://i.sstatic.net/eNen2.png ...

htmlcssbootstrap-5

jQuery datatables provide a powerful feature for column filtering using jQuery functions

Looking for advice on how to add a filter to my jQuery datatable column that contains checkboxes. I want the filter to be a drop-down menu with options for "checked" and "unchecked", so that when a user selects one of these options, only the rows contain ...

jqueryhtmldatatables

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

cssbootstrap-4

Display toolbar title on small screens in separate lines

Recently, I encountered an issue while using v-toolbar in my vue app. Despite my efforts, I couldn't find a way to split the title into multiple lines on small screens. Currently, it displays as "Secti...." on smaller devices. Can anyone assist me wit ...

javascriptcssvue.js

data being returned twice onpopstate

After experimenting with onpopstate, I encountered an issue. When I click the back button in my browser, the URL changes as expected, but the page code loads twice, resulting in duplicate lists and div elements. Why is this happening and how can it be reso ...

javascriptajaxhtmlurl