8.10.2011

his post has a secret

NEGATED :nth-child() pseudo-class
CSS 3 Module <== Test # ==>
W3C Selectors 90 of 172
Testing Date Revision
NEGATED :nth-child() pseudo-class (ID #73) 2004-03-03 1.1
  • First list item
  • This second list item should have a green background
  • Third list
  • This fourth list item should have a green background
  • Fifth list item
  • This sixth list item should have a green background
  1. This first list item should have a green background
  2. Second list item
  3. This third list item should have a green background
  4. Fourth list item
  5. This fifth list item should have a green background
  6. Sixth list item
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
4.1 4.2 4.3
Green row : 5.1 5.2 5.3
Green row : 6.1 6.2 6.3
1.1 green cell green cell 1.4 green cell green cell 1.7 green cell
2.1 green cell green cell 2.4 green cell green cell 2.7
{/block:HasPages}
{block:Show} « Back to posts {/block:Show} {block:SearchPage}

{block:SearchResultOne}One result found searching for{/block:SearchResultOne} {block:SearchResultMany}{SearchResultCount} results found searching for{/block:SearchResultMany} {block:SearchResultNone}No results found searching for{/block:SearchResultNone}

clear
  • Sort by
  • {block:SearchSortBestmatch}Best match{Else}Best match{/block:SearchSortBestmatch}
  • {block:SearchSortRecent}Most recent{Else}Most recent{/block:SearchSortRecent}
  • {block:SearchSortInteresting}Most interesting{Else}Most interesting{/block:SearchSortInteresting}
Search all of Posterous for {SearchQuery} » {/block:SearchPage} {block:ArchiveList} Archive for

{ArchiveDate}

{/block:ArchiveList}

{block:Posts}


******* {Title} ******* {block:Description} ------------- {Description} ------------- {/block:Description} {/block:HeaderImage} {block:HasPages} {block:Pages}* « Back to posts ( {BlogURL} ) {/block:Show} {block:SearchPage} ***************************************************************** {block:SearchResultOne}One result found searching for{/block:SearchResultOne} {block:SearchResultMany}{SearchResultCount} results found searching for{/block:SearchResultMany} {block:SearchResultNone}No results found searching for{/block:SearchResultNone} ***************************************************************** Search all of Posterous for {SearchQuery} » ( {PosterousURL}/explore/?search={SearchQuery} ) {/block:SearchPage} {block:ArchiveList} Archive for ------------- {ArchiveDate} ------------- {/block:ArchiveList} {block:ListSidebar} {block:Claimed} {Profile} {ProfileExternalLinks} {OwnerName}'s profile » ( {ProfileLink} ) {block:NotSearchOrTag} {block:SearchBox searchbox_button="searchbox_button" searchbox="searchbox"/} {/block:NotSearchOrTag} {block:HasLinks} {block:LinkCategories} ******* {Label} ******* {block:Links}* {Label} ( {URL} ) {/block:Links} {/block:LinkCategories} {/block:HasLinks} {block:HasArchives} ******* Archive ******* {block:ArchiveYear} ( {Permalink} ) ************ Private Post ************ This post has a secret URL and not linked on your public site. Send the secret URL to share it with anyone. {/block:Private} ******* {Title} ******* {/block:Title} {block:EditBox} {EditBoxContents} {/block:EditBox} ( http://www.facebook.com/sharer.php?u={Permalink}%2F&amp;t={Title}&amp;language=en ) {Body} {block:ShowOrList} {block:Author} {block:AuthorUser} ********************** Posted by {AuthorName} ********************** {/block:AuthorUser} {block:AuthorEmail} *************** Posted by email *************** {block:NewDayDate} {/block:NewDayDate} {block:Private} {/block:Private}
{block:Title}

{Title}

{/block:Title}
{block:EditBox} {EditBoxContents} {/block:EditBox}
Share on Facebook {Body}
{block:ShowOrList} {block:Author}
{block:AuthorUser}

Posted by

{/block:AuthorUser} {block:AuthorEmail}

Posted by email

{/block:AuthorEmail}
{/block:Author} {block:Responses} {block:Sharing}
{block:FbLike /}
{block:Tweet /}
{/block:Sharing} {/block:Responses} {/block:ShowOrList}
{/block:Posts}
{block:List}


{block:Pagination/}
{/block:List}
3.1 green cell green cell 3.4 green cell green cell 3.7 green cell
.red { background-color : red }
ul > li:not(:nth-child(odd)) { background-color : lime }
ol > li:not(:nth-child(even)) { background-color : lime }
table.t1 tr:not(:nth-child(-n+4)) { background-color : lime }
table.t2 td:not(:nth-child(3n+1)) { background-color : lime }
table.t1 td, table.t2 td { border : thin black solid }
<ul>
  <li>First list item</li>
  <li class="red">This second list item should have a green background</li>
  <li>Third list</li>

  <li class="red">This fourth list item should have a green background</li>
  <li>Fifth list item</li>
  <li class="red">This sixth list item should have a green background</li>

</ul>
<ol>
  <li class="red">This first list item should have a green background</li>
  <li>Second list item</li>
  <li class="red">This third list item should have a green background</li>

  <li>Fourth list item</li>
  <li class="red">This fifth list item should have a green background</li>
  <li>Sixth list item</li>
</ol>

<div>
<table border="1" class="t1">
  <tr>
<td>1.1</td>
<td>1.2</td>

     <td>1.3</td>
</tr>
  <tr>
<td>2.1</td>
<td>2.2</td>

     <td>2.3</td>
</tr>
  <tr>
<td>3.1</td>
<td>3.2</td>

     <td>3.3</td>
</tr>
  <tr>
<td>4.1</td>
<td>4.2</td>

      <td>4.3</td>
</tr>
  <tr class="red">
<td>Green row : 5.1</td>
<td>5.2</td>

<td>5.3</td>
</tr>
  <tr class="red">
<td>Green row : 6.1</td>
<td>6.2</td>

<td>6.3</td>
</tr>
</table>
<p></p>
<table class="t2" border="1">

  <tr>
<td>1.1</td>
<td class="red">green cell</td>
<td class="red">green cell</td>

      <td>1.4</td>
<td class="red">green cell</td>
<td class="red">green cell</td>
      <td>1.7</td>

<td class="red">green cell</td>
</tr>
  <tr>
<td>2.1</td>
<td class="red">green cell</td>

<td class="red">green cell</td>
      <td>2.4</td>
<td class="red">green cell</td>
<td class="red">green cell</td>

      <td>2.7</td>
<td class="red">green cell</td>
</tr>
  <tr>
<td>3.1</td>

<td class="red">green cell</td>
<td class="red">green cell</td>
      <td>3.4</td>
<td class="red">green cell</td>

<td class="red">green cell</td>
      <td>3.7</td>
<td class="red">green cell</td>
</tr>

</table>
</div>