pseudospec.html

<html><head><title>Pseudo-Element Specificity</title><style type="text/css"><!--p.test1:first-letter {color: green; font-size: 200%;}p.test1 {color: gray; font-size: 1em;}p.test2 {color: gray; font-size: 1em;}p.test2:first-letter {color: green; font-size: 200%;}--></style></head><body id="www-meyerweb-com" class="css"><p>Styles applied to this page:</p><pre>p.test1:first-letter {color: green; font-size: 200%;}p.test1 {color: gray; font-size: 1em;}p.test2 {color: gray; font-size: 1em;}p.test2:first-letter {color: green; font-size: 200%;}</pre><hr><p class="test1">This paragraph has a <code>class</code> of <code>test1</code>, and its text should be gray.  This should apply to the first letter, whose rule has a specificity equal to the <code>p.test</code> rule.</p><p class="test2">This paragraph has a <code>class</code> of <code>test2</code>, and its text should be gray.  This should apply not to the first letter, whose rule has a specificity equal to the <code>p.test</code> rule, and which comes later in the stylesheet.</p></body></html>