css3-trans-an/selectors.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS3 Selector Fun</title><style type="text/css"><!--body {background: #EEEEC0;}table {margin: 0.5em 0.5em 2em;}pre {margin: 0.5em; padding-top: 0.25em; border-top: 1px solid black;}table#checkerboard tr:nth-child(even) td:nth-child(even), table#checkerboard tr:nth-child(odd) td:nth-child(odd) {color: black; background: white;}table#checkerboard tr:nth-child(even) td:nth-child(odd), table#checkerboard tr:nth-child(odd) td:nth-child(even) {color: white; background: black;}table#alt-row {background: white;}table#alt-row tr:nth-child(3n+1) {background: silver;}table#alt-row td:nth-child(2n+4) {font-weight: bold; font-style: italic;}div.typetest p:first-of-type {color: gray; background: cyan;}div.typetest p:not-first-of-type {font-style: italic;}div.typetest p:last-child {text-decoration: underline;}div.typetest p:not(:last-child) {border: 2px dotted purple;}--></style></head><body id="www-meyerweb-com" class="css"><pre>table#checkerboard tr:nth-child(even) td:nth-child(even), table#checkerboard tr:nth-child(odd) td:nth-child(odd) {color: black; background: white;}table#checkerboard tr:nth-child(even) td:nth-child(odd), table#checkerboard tr:nth-child(odd) td:nth-child(even) {color: white; background: black;}</pre><table id="checkerboard"><tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td><td>r1c7</td><td>r1c8</td></tr><tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td><td>r2c7</td><td>r2c8</td></tr><tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td><td>r3c7</td><td>r3c8</td></tr><tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td><td>r4c7</td><td>r4c8</td></tr><tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td><td>r5c7</td><td>r5c8</td></tr><tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td><td>r6c7</td><td>r6c8</td></tr><tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td><td>r7c7</td><td>r7c8</td></tr><tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td><td>r8c7</td><td>r8c8</td></tr></table><pre>table#alt-row {background: white;}table#alt-row tr:nth-child(3n+1) {background: silver;}table#alt-row td:nth-child(2n+4) {font-weight: bold; font-style: italic;}</pre><table id="alt-row"><tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td><td>r1c7</td><td>r1c8</td></tr><tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td><td>r2c7</td><td>r2c8</td></tr><tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td><td>r3c7</td><td>r3c8</td></tr><tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td><td>r4c7</td><td>r4c8</td></tr><tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td><td>r5c7</td><td>r5c8</td></tr><tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td><td>r6c7</td><td>r6c8</td></tr><tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td><td>r7c7</td><td>r7c8</td></tr><tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td><td>r8c7</td><td>r8c8</td></tr></table><pre>div.typetest p:first-of-type {color: gray; background: cyan;}div.typetest p:not-first-of-type {font-style: italic;}div.typetest p:last-child {text-decoration: underline;}div.typetest p:not(:last-child) {border: 2px dotted purple;}</pre><div class="typetest"><p>This is a paragraph which is first in the DIV.</p><ul><li>Here's an unordered list...<li>...with three list items...<li>...just for fun.</ul><p>Another paragraph.</p><h3>Heading-3</h3><p>And yet another paragraph.</p></div></body></html>