In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
p:first-child i { 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 paragraph is the first-child element of the body element..</p> </body> |
I am a strong person. I am a strong person. I am a strong person. I am a strong person. The first paragraph is the first-child element of the body element. |
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
