i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS nth child selector
12-26-2012, 11:49 AM
Post: #1
CSS nth child selector
If N is a number or a number expression, :nth-child(N) matches elements that are preceded by N-1 siblings in the document tree.

Consider the following example, these selectors are equivalent, and will match odd table rows:

Code:
tr:nth-child(2n+1) {
  /* some styles */
}
tr:nth-child(odd) {
  /* some styles */
}

Similarly, to select even rows in the table, we will use:

Code:
tr:nth-child(even) {
  /* some styles */
}

The following code will match the first three rows of a table:

Code:
tr:nth-child(-n+3) {
  /* some styles */
}

The following selector will match any paragraph that is first child of its parent:

Code:
p:nth-child(1) {
  /* some styles */
}

The above code can also be written as:

Code:
p:first-child {
  /* some styles */
}

Quote:Support: IE 9+, FF 3.5+, Safari 3.1+, Opera 9.5+, Chrome 2.0+

Thanks for reading... Tongue





View Asad Ali's profile on LinkedIn

Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  CSS Menu Without Using Javascript - Css Menu with Dropdownlist raju 1 2,443 09-14-2010 11:55 AM
Last Post: nisar87



User(s) browsing this thread: 1 Guest(s)