Using Nth-Child to Style Item 4 and Onwards

Using nth-child to style item 4 and onwards

Use :nth-child(n+5) (CSS indexes start at 1).

Demo: http://jsfiddle.net/nTZrg/1/

li:nth-child(n+5) {
    background-color:blue;
}

CSS :nth-child() style every 2nd and 3rd for same color and so on

Here's how I would do it.

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

li:nth-child(4n+2),
li:nth-child(4n+3) {
  background-color: blue;
}

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

Exclude children from :nth-child(n) / only include certain children

It may be clearer to exclude certain children rather than find a selector for all those to be included. This depends on the exact use case of course.

For the example in the question this snippet specifies two children which are to be excluded using a :not pseudo class:

div:not(:nth-child(1), :nth-child(6)) {
  color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

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>

CSS Selector for nth range?

You won't be able to do this with a single :nth-child() — you'll need to chain at least one other such pseudo-class. For example, a combination of :nth-child() and :nth-last-child() (the n+2 bit means start counting forward and backward respectively from the 2nd child):

.myTableRow td:nth-child(n+2):nth-last-child(n+2){
background-color: #FFFFCC;
}

Alternatively, instead of making use of a formula, simply exclude :first-child and :last-child:

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}

CSS :nth-child() selector in a PHP constructed site

If n is the first child, (3n-2) would compute to (3-2 = 1); apparently, every last one of those divs is now the first (and therefore only) child of its parent. I can't tell you exactly what to fix without seeing the rest of your code (is this loop inside of another loop which is creating a parent for each one?), but you probably have to move that loop up a level or otherwise ensure that all of your .containers are being created as siblings, and not as lonely, single children.

For future help with debugging nth-child issues, this is handy: http://css-tricks.com/examples/nth-child-tester/

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>

---

Related Topics