In the following example, the selector matches the first <i> element in all <p> elements:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
p i:first-child { color: blue; } </style> <body> <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p> <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p> <p>The first italicized "strong" is the first-child of the paragraph while the second one is not.</p> </body> |
I am a strong person. I am a strong person. I am a strong person. I am a strong person. The first italicized "strong" is the first-child of both paragraph elements, while the second one is not. |
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
