Understanding Nth-Child(An + B): Selector with Formula in CSS3

Understanding nth-child(an + b): selector with formula in CSS3?

The n in :nth-child() actually starts counting from zero, rather than one. From the spec:

The value a can be negative, but only the positive values of an+b, for n≥0, may represent an element in the document tree.

Although it says that the index of the first child of 1, which indeed it is, what it's referring to is the result of the formula, not the value of n. In other words, the first child is represented by a function of n that evaluates to 1, not by a function of n where n = 0 or n = 1 (whichever it starts counting at).

So the formula :nth-child(1n+1) (or algebraically equivalent :nth-child(n+1)) evaluates for n = 0 as:

  1n + 1
= 1(0) + 1
= 0 + 1
= 1

Which results in your first div being matched.

You need to start from 2 for the pseudo-class notation to work as expected:

.list-item > div:nth-child(1n+2) > i[class^="icon-"], 
.list-item > div:nth-child(1n+2) > i[class*=" icon-"]

Or to make things simpler, you can opt for the general sibling combinator ~ in conjunction with :first-child instead:

.list-item > div:first-child ~ div > i[class^="icon-"], 
.list-item > div:first-child ~ div > i[class*=" icon-"]

This has an added bonus of IE7/IE8 support, in case it matters.

what is n in nth:child selector in css

n represents a natural number. Meaning, [0, 1, 2, 3, 4, 5, ...]

In your CSS, 2n+1 thus means:
2*0+1 (= 1), 2*1+1 (= 3), 2*2+1 (= 5), 2*3+1 (= 7) and so on.

Your code basically selects all the odd children. Which could be written much shorter, namely:

nth-child(odd)

nth child selector CSS under another class

The selector .rounded-image:nth-child(1) actually means "the element with rounded-image class that is the first child of its parent in the same time". In general, combining selectors (like tag.class or .class:pseudo-class) means the AND condition for these selectors.

The CSS Selectors Level 4 introduced the :nth-child(An + B of ...) syntax, which allows to express "the 1st element with given class" condition as :nth-child(1 of .rounded-image). Unfortunately, it works currently only in Safari.

The only way to solve your problem with currently supported CSS (without relying to the specific DOM order) seems to be setting special rules for all the .rounded-image elements that follow other
.rounded-image element:

.rounded-image {
   display: none;
}
.rounded-image ~ .rounded-image {
   display: block;
}

The first selector matches all .rounded-image elements, while the second selector matches all .rounded-image elements except the first one (that is not preceded by other .rounded-image element). So only the first .rounded-image element will be hidden.

CSS nth-child select all but last element when length is unknown

Use :not(:last-child) to target all except the last.

http://jsfiddle.net/96nd71e3/1/

nth child without duplication in css

You can use :nth-child with equation in an+b format(where replace a and b with an integer and n would be 0, 1, 2,....).

li:nth-child(-n+10) {  color: red}

<ol>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li>  <li>a</li></ol>

How to select custom number of rows using CSS nth-child selector?

To do that you'd have to specify the elements manually, like so:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                text-align: center;
                border-collapse: collapse;
                width: 30%;
            }
            td, th {
                border: 1px solid grey;
                padding: 5px;
            }
            tr:nth-child(2), 
            tr:nth-child(3), 
            tr:nth-child(5) {
                background-color: lightgrey;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>AAA</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>BBB</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>CCC</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>DDD</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>EEE</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>FFF</td>
                <td>000</td>
            </tr>
            <tr>
                <td>20-08-2021</td>
                <td>GGG</td>
                <td>000</td>
            </tr>
        </table>
    </body>
</html>

How do I start the counting of the nth-child selector only with class box special not just box?

nth-child is counting from the parent's child nodes. The correct answer is nth-of-type:

.box.special:nth-of-type(odd)
{
    background-color: red;
}

.box.special:nth-of-type(even)
{
    background-color: blue;
}

Selecting half the elements with :nth-child?

The only way you'd be able to get anywhere near to that in pure CSS is to do a selector on either nth-child(odd) or nth-child(even). If you want exactly the last half (and not either odd or even), then you'd have to use JavaScript/jQuery.

Using jQuery, you could get them using:

var yourList = $("ul li");

yourList = yourList.slice(0, Math.floor(yourList.length/2));

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

Understanding Nth-Child(An + B): Selector with Formula in CSS3