1. :lang() class
SYNTAX
<style>
:lang(language-code) {
/* CSS properties */
}
</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-class Example</title>
<style>
body{
background: #1b1b1b;
}
/* Style for English paragraphs */
p:lang(en) {
color: white;
font-weight: bold;
font-size: 40px;
font-family: sans-serif;
}
/* Style for Spanish paragraphs */
p:lang(es) {
color: green;
font-size: 20px;
font-style: italic;
}
/* Style for French paragraphs */
p:lang(fr) {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p lang="en">This is an English paragraph.</p>
<p lang="es">Este es un párrafo en español.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>
<p lang="en">Another English paragraph.</p>
<p lang="es">Otro párrafo en español.</p>
</body>
</html>
2. :link class
SYNTAX
<style>
selector:link {
property: value;
}
</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-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
}
a:link {
color: #1e90ff;
text-decoration: none;
}
a:link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to RAYS Coding</h1>
<p>
Check out our <a href="https://www.example.com">tutorials</a> to learn more!
</p>
</body>
</html>
3. :hover
SYNTAX
<style>
tag:hover {
property: value;
}
</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-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
}
a {
color: #00ff00;
text-decoration: none;
transition: color 0.3s;
font-size: 40px;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to RAYS Coding</h1>
<p>Is example mein aap hover effect dekh sakte hain:</p>
<a href="#">Click Here</a>
</body>
</html>
 |
| Before Hover |
 |
| After Hover |
4. :visited
SYNTAX
<style>
element:visited {
property: value;
}
</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-class Example</title>
<style>
body {
background: #1b1b1b;
color: #ffffff;
font-family: Arial, sans-serif;
}
a {
color: royalblue;
text-decoration: none;
font-size: 70px;
}
a.weblink:visited {
color: tomato;
}
</style>
</head>
<body>
<h1>Welcome to RAYS Coding</h1>
<p>
Click the link below to visit OpenAI:
<a class="weblink" href="https://www.rayscoding.com" target="_blank">Rays Coding</a>
</p>
</body>
</html>
