Quick Nth-Child Issue

Quick nth-child issue

Use div:nth-child(4n-1), div:nth-child(4n). The logic is simple — you want to select items in groups of four, so 4n would be the common denominator. Since you want to select the penultimate and the last items in the group, 4n-1 and 4n respectively would do the job.

As follow is a simple diagram illustrating my point:

#1
#2
#3  <- 4th item - 1
#4  <- 4th item
#5
#6
#7  <- 4th item -1
#8  <- 4th item

div:nth-child(4n-1), div:nth-child(4n) {  background-color: #eee;}

<div class="normal">Item 1</div><div class="normal">Item 2</div><div class="different">Item 3</div><div class="different">Item 4</div><div class="normal">Item 5</div><div class="normal">Item 6</div><div class="different">Item 7</div><div class="different">Item 8</div>

Why is nth-child selector not working?

The nth-child selector counts siblings (i.e., elements having the same parent).

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
              .
              .
              .

CSS first-child and nth-child not working correctly

This selector: .service:nth-child(2) { margin-right: 0!important;} isn't working because the element you are trying to select is not the 2nd child.

Also...by the way, neither is this one: .service:first-child { margin-right: 0!important;}.

The first-child is the anchor tag

<a name="services"></a>

Accordingly, you should use

.service:nth-child(3) { margin-right: 0!important;}

instead...in this specific instance.

JSfiddle Demo

nth-child doesn't respond to class selector

Try the :nth-of-type() pseudo-selector instead:

#content .foo:nth-of-type(1) { margin-top: 0; }

Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.

CSS Selector nth-child producing odd results

Each part of div.span.two.data-stat:nth-child(1) matches a part of the element it's checking against, in one big "and" check.

:nth-child(x) finds an element where it is the xth child of the parent.

So div.span.two.data-stat:nth-child(1) means "Find me all elements where the tag name is div and has the class 'contains' and has the class 'two' and has the class 'data-stat' and is the first child of its parent".

The first child of DIV.row.number:nth-child(2), which you're trying to match with DIV.span.two.data-stat:nth-child(1), doesn't have the class data-stat and so therefore does not match.

Jquery nth-child issue with select

:nth-child(2) will grab the 2nd child of everything within that parent. You might want to change it to td:nth-child(2)

As an aside, I would also change td:first to td:first-child as that is the natural CSS selector and is suggested to be quicker:

https://api.jquery.com/first-selector/

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").

nth-child(1) affect to all DIVs

right not you are testing if container-soc is a first child of anything - which it always is here.

You could check your a tags.

.soc-box a:nth-of-type(1) .container-soc {background-color : red}

<div class="soc-box">  <a href="http://sample.com">      <div class='container-soc'>        <img src="img/tel.svg" class='iconDetails' >        <div class="texti">          <h4>Item 1</h4>        </div>      </div>  </a>  <a href="http://sample.com">     <div class='container-soc'>        <img src="img/twitter.svg" class='iconDetails' >        <div class="texti">          <h4>Item 2</h4>       </div>     </div>  </a><div>

CSS nth-child for greater than and less than

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

Is it possible to select the last n items with nth-child?

This will select the last two iems of a list:

li:nth-last-child(-n+2) {color:red;}

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

---

Related Topics