How to use :nth-child() pseudo-class In CSS
The :nth-child() pseudo-class allows you to style elements based on their position within a parent. This method targets specific paragraphs and applies custom text colors dynamically. With this technique, we can dynamically adjust the appearance of paragraphs.
Syntax:
parent Element : nth-child(n) {
/* CSS properties */
}
Example: This Example uses the :nth-child() pseudo-class to set text color for paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Text Color Styling</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
p:nth-child(2) {
color: purple;
}
</style>
</head>
<body>
<h3>
Using :nth-child() pseudo-class
</h3>
<p>
This paragraph has purple color
</p>
</body>
</html>
Output:
Output
How to Set Text Color for a Specific Paragraph using CSS ?
In web development, setting different text colors for a specific paragraph can be useful for highlighting certain content. We will see how to set different text colors for a specific paragraph using CSS. This can help make certain parts of your text stand out.
Tip: Prefer External Stylesheets for easier maintenance and updates.
Below are the approaches to set text color for a specific paragraph using CSS:
Table of Content
- Using Inline CSS
- Using a Class or ID Selector
- Using :nth-child() pseudo-class