How to Use Nth-Child in CSS to Select All Elements After The 3Rd One

How to use nth-child in CSS to select all elements after the 3rd one?

Yes you can do it using :nth-child(n+4)

In your case:

@media(max-width:768px) {
   .list li:nth-child(n+4) {
      display:none;
   }
}

You can see this fiddle : http://jsfiddle.net/wgLCH/2/

How to select child element after 3rd or element after any position only

Use the nth-child selector with the appropriate offset.

n takes on values starting with 0, 1, 2... so this will select the 4th, 5th, 6th ... child elements of the ul.

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

<ul>  <li>first</li>  <li>second</li>  <li>third</li>  <li>fourth</li>  <li>fifth</li>  <li>sixth</li>  <li>seventh</li></ul>

How to target all elements besides the first with nth-child?

You can use the following formula:

:nth-child(n+1)

or for some browsers:

:nth-child(n+2)

W3Schools says:

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Link

Or you can use separate :first-child CSS declaration for this first element.

Select every Nth element in CSS

As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero).

Here's how you would rewrite the above selector list:

div:nth-child(4n)

For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.

Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.

By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the n variable, it starts counting at 0. This is what each selector would match:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

As you can see, both selectors will match the same elements as above. In this case, there is no difference.

nth-child() selector working only on select few elements

nth child, as explained here selects based on elements that are the nth child of their parents.

so 1 is working, because the first stroke is the first child.
3 works because the second stroke is the third child.
2 won't work, because there are no strokes that are 2nd children, just h2

Can one use CSS :nth-child (or similar) to select batches of elements in HTML, e.g every other 4 nodes?

Yes, you can use a group of nth-child selectors like in the below snippet to select a repeating group of elements based on a pattern.

One thing to note is that selecting every 4th element and the next 4 after it is equivalent to selecting all elements after the 4th element and hence I have restricted the sample to just the next 2 elements.

Explanation of the selector (selects 4th, 5th, 8th, 9th elements and so on):

nth-child(4n+4) - selects 4th (4*0 + 4), 8th (4*1 + 4), 12th (4*2 +4) elements
nth-child(4n+5) - selects 5th (4*0 + 5), 9th (4*1 + 5), 13th (4*2 + 5) elements.

As you can see from the explanation, the series starts from the 4th element and repeats from then on. If your need is to start with the series from the 1st element (say 1st, 2nd, 5th, 6th etc) then you could use the selector group as div:nth-child(4n+1), div:nth-child(4n+2).

div:nth-child(4n+4), div:nth-child(4n+5){  color: red;}

<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div>

How to display the first 3 list items and hide the rest with CSS nth-child?

I do not know which browser supports this, but you can pass a formula to :nth-of-type():

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

Further details on: http://www.w3schools.com/cssref/sel_nth-of-type.asp

Edit

I altered it from (n+4) to (1n+4) since the first version works but isn't valid. I use this in media queries to hide cut-down items on smaller screens.

Example:

b:nth-of-type(1n+4){ opacity:.3; }

<b>1</b><b>2</b><b>3</b><b>4</b><b>5</b>

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

Select the last 3 child elements

You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

fiddle demonstration from Fabrício Matté

This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

everything else will return a negative number

How to Use Nth-Child in CSS to Select All Elements After The 3Rd One