CSS nth-child Selector


In CSS, selectors are patterns used to select the element(s) you want to style. There are many of them. To see a list of them and examples of them you can go to the website w3schools and have a look at their CSS Selector Reference page.

This blog post is just showing an example of the nth-child selector. Below is part of a web page.

<style> 
p:nth-child(2) {
    background: red;
}
p:nth-child(3) {
    background: blue;
}
p:nth-child(3) {
    background: green;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph. With the above CSS, it's background is red.</p>
<p>The third paragraph. With the above CSS, it's background is green.</p>
<p>The fourth paragraph.</p>

For even more information about the nth-child selector go ahead and have a look at this URL: https://css-tricks.com/almanac/selectors/n/nth-child/

Leave a comment

Your email address will not be published. Required fields are marked *