First-child selector in CSS3

How to select the first child of every parent element in CSS3?

By using First-child selector we can select the first child of every parent element.

<style>
        b:first-child {
            color: red;
        }
</style>

<body>
    <b>This is 'b' element but it is not the first child.</b>
    <br />
    <div>
        <b>This is the 'b' element and it is First child of parent div.</b>
    </div>
    <p>
        <b>This is the first child of the parent 'p' and it is 'b' element.</b><br />
        <b>This is the second child of the parent 'p' and it is also 'b' element.</b>
    </p>
    <br />
    <div>
        <b>This is the first child of the parent div in'b' element.</b><br />
        <b>This is the second child of the parent div in 'b' element.</b>
        <p>This is the first child of the parent div in 'p' element.</p>
        <p>This is the second child of the parent div in 'p' element.</p>
    </div>
    <br />
</body>

In the above code snippet we have given first-child selector to the <b> element. So, that it will select the first child in the every <b> element of its parent element and applies <style> to that particular element. That is shown in the below output.

OUTPUT

Views: 3842 | Post Order: 18

CSS3 > Selectors

First-child selector in CSS3

How to select the first child of every parent element in CSS3?

Related Posts

Utility Tools