List of the Pseudo-classes
1. :first-child
SYNTAX
<style>
element:first-child {
/* styles */
}
</style>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-classes</title>
<style>
body {
background: #1b1b1b;
}
ul li {
color: #fff;
}
ul li:first-child {
color: royalblue;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
</ul>
</body>
</html>
2. :last-child
SYNTAX
<style>
element:last-child {
/* styles */
}
</style>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-classes</title>
<style>
body {
background: #1b1b1b;
}
ul li {
color: #fff;
}
ul li:last-child {
color: tomato;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-shadow: 0 0 15px tomato;
letter-spacing: 15px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
</ul>
</body>
</html>
3. :nth-child(n)
SYNTAX
<style>
element:nth-child(n) {
/* style yahan apply hoti hai */
}
</style>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-classes</title>
<style>
body {
background: #1b1b1b;
}
ul li {
color: #fff;
}
ul li:nth-child(1),ul li:nth-child(3) {
color: tomato;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
text-shadow: 0 0 15px tomato;
letter-spacing: 15px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
</ul>
</body>
</html>
4. :nth-last-child(n)
SYNTAX
<style>
element:nth-last-child(n) {
/* styles */
}
</style>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS Coding: Pseudo-classes</title>
<style>
body {
background: #1b1b1b;
color: white;
}
ul li:nth-last-child(2) {
color: red;
font-weight: bold;
}
ul li:nth-last-child(4) {
color: #fff;
letter-spacing: 4px;
font-family: sans-serif;
text-shadow: 0 0 10px #fff;
font-weight: bold;
}
a:nth-last-child(1) {
color: #00ffff;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
</ul>
<p>
Welcome to the RAYS Coding website! We offer a wide range of tutorials and resources to help you learn coding easily.
Our goal is to provide step-by-step guidance to beginners as well as advanced learners.
</p>
<p>
If you're interested in learning more, check out our
<a href="#">latest blog posts</a> or
<a href="#">coding challenges</a> to test your skills.
</p>
</body>
</html>
