Pseudo-classes

CSS Pseudo-classes In Hindi

CSS

Pseudo Classes In CSS In Hindi – Is Tutorial Me CSS Pseudo Classes Ko With Example Complete Explain Kiya Hai |

Is Tutorial Me Ham Dekhnge Ki Pseudo Classes Hoti Kya Hai, Kese Use Ki Jati Hai Etc | Pseudo Classes Ki Help Se Ham Web Pages Ko Kafi Jyada Attractive Bna Skte Hai |

CSS Pseudo-classes In Hindi

Ab Ham Dekhte Hai Ki Pseudo Classes Kya Hoti Hai |

What are Pseudo-classes In CSS In Hindi ?

Pseudo Class Kisi Element Ki Special State Ko Btane Ke Liye Use Ki Jati Hai , Aur Fir Us State Me Ham Use Style Dekar Web Page Ko Aur Bhi Attractive Bna Skte Hai |

Example : Element Ki Kuchh Special State –

  • Jab User Kisi Element Ke Upr Mouse Le Jaye To Use Style Dena
  • Visited Aur Unvisited Links Ko Style Dena
  • Kisi Element Par Focus Krne Par Use Style Dena

Syntax To Use Pseudo Classes

Pseudo Classes Ko Use Krne Ke Liye Use CSS Style Ke Andar Is Tarah Likha Jata Hai –

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes In CSS In Hindi

Kisi Link Ki Different-Different State Ke Liye Use Hone Wali Pseudo Classes –

  • :link 
  • :visited
  • :hover
  • :active

In Pseudo Classes Ko Samajhne Ke Liye Ek Example Lete Hai –

Example :

<!DOCTYPE html>
<html>
<head>
<style>
a: link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Master Programing CSS Pseduo Classes Tutorial</h2>
<p><b><a href="#" target="_blank">This is a link</a></b></p>

</body>
</html>

Output :

Output Me Hmne Dekha Ki Pseudo Classes Ki Help Se Link Ki Different-Different State Me Style Kese Di Ja Skti Hai |

Pseudo-classes and CSS Classes In CSS In Hindi

Pseduo Classes Ko CSS Classes Ke Sath Combine Kr Ke Bhi Use Kiya Ja Skta Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: green;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and CSS Classes</h2>

<p><a class="highlight" href="#">pseudo classes</a></p>

</body>
</html>

Output :

Output Me Hamne Dekha Ki Jab Ham Link Par Mouse Hover Karte Hai To Uska Color Change Ho Jata Hai |

Hover on <div> In CSS In Hindi

<div> Element Ke Liye Hover Pseudo Class Use Karte Hai

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: hotpink;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: green;
}
</style>
</head>
<body>

<h2>Master Programing CSS Pseudo Classes</h2>

<div>Mouse Over Me</div>

</body>
</html>

Output :

Jab Ham Div Ke Upr Mouse Le Kar Jate Hai To Uska Color Green Ho Jata Hai , Is Tarah Se Ham Kisi Div Ko Attractive Bna Skte Hai |

Simple Tooltip Hover In CSS In Hindi

:Hover Pseudo Class Ki Help Se Ham Web Page Ko Attractive Bna Skte Hai |

Example : Ek <div> Lete Hai Aur Ek <p> Tag Lete Hai , Aur Style Set Krte Hai Jab Bhi Ham <div> Par Hover Kre To Hi Hme <p> Ka Content Dikhna Chahiye |

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: hotpink;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over me to show the p element
  <p>Hey Welcome!</p>
</div>

</body>
</html>

Output :

Output Me Hmne Dekha Ki Jab Ham <div> Ke Upr Mouse Le Kar Jate Hai To Hi <p> Tag Ka Content Dikhta Hai |

CSS – The :first-child Pseudo-class In Hindi

:first-child Pseudo Class Kisi Specified Element Ko Find Karti Hai Jo Ki Kisi Another Element Ka First Child Hai, Aur Fir Ham Use Style De Skte Hai |

Match the first <p> element In CSS In Hindi

:first-child Pseudo Class Ki Help Se Ham First <p> Element Ko Select Kar Ke Use Style De Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: red;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

</body>
</html>

Output :

Match the first <i> element in all <p> elements

:first-child Pseudo Class Ki Help Se Ham <p> Ke Andar Ane Wale First <i> Element Ko Select Kar Skte Hai Aur Use Style De Skte Hai |

Example : Ek <p> Tag Lete Hai Aur Uske Andar Do <i> Tag Lete Hai

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: red;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Output :

Match all <i> elements in all first child <p> elements

Jo First Child <p> Hai Uske Andar Ane Wale All <i> Element Ko Style Is Parkar De Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: red;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Output :

Output Me Hamne Dekha Ki First <p> Ke Andar Ane Wale All <i> Element Ka Color Red Ho Gya | To Is Tarah Se Aap Bhi Aap :first-child Pseudo Class Ka Use Kar Skte Hai |

Leave a Reply

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