Pseudo Classes
CSS में कुछ pseudo classes होती हैं जो element की special states को define करने के लिए use की जाती हैं। pseudo classes के use से हम किसी element के एक particular state में उस element पर style apply कर सकते हैं। For e.g. किसी visited link का color change करने के लिए।
या फिर
किसी element को focus किए जाने पर उसका background color change करने के लिए या कोई और style देने के लिए।
या फिर
किसी element पर mouse ले जाने पर उसे style देने के लिए।
Syntax :
selector:
pseudo-class
{
property-name1: value;
property-name2: value;
}
some pseudo classes –
1) :link :- यह केवल उन links को target करती हैं जो visit न की गई हों और जिनमें href attribute define किया गया हो।
For e.g.
<html>
<head>
<style>
a:link
{
color: green;
}
</style>
</head>
<body>
<a href =“contact.html”>contact</a>
<a>click</a>
</body>
</html>
2) :visited :- यह सिर्फ उन links को target करती हैं जो visit की जा चुकी हैं।
For e.g.
<style>
a:visited{
color: red;
}
</style>
<a href =“home.html”>home</a>
<a herf =“about.html”>About</a>
यदि ‘About’ link visit कर ली गई हो तो वह red color में display होगी।
3) :focus :- जब किसी element को focus किया जाता हैं तो उसे target करने के लिए इस pseudo class का use किया जाता हैं।
For e.g.
<html>
<head>
<style>
input:focus
{
background–color: blue;
}
</style>
</head>
<body>
<input type =“text” placeholder =“search”>
</body>
</html>
जब हम इस field को focus करेंगे तो उसका background-color blue हो जाएगा।
4) :active :- यह pseudo class किसी element (generally link या button) को तब target करती हैं जब वह element active state होता हैं।
For e.g.
<html>
<head>
<style>
#btn:active{
color: red;
background-color: blue;
}
</style>
<body>
<button id =“btn”>click</button>
</body>
</html>
यदि यह button active state में होगा तो इसका text color red, और background-color blue होगा।
5) :hover :- जब हम किसी element पर mouse का cursor ले जाते हैं तो वह element का state ‘hover’ होता हैं। hover pseudo class किसी element को तब target करती हैं जब वह element hover state में होता हैं।
For e.g.
<html>
<head>
<style>
button:hover{
color: green;
background-color: yellow;
}
</style>
<button>click</button>
</body>
</html>
जब इस button पर हम mouse का cursor ले जाएँगे तो उसका text color green हो जाएगा और background color yellow हो जाएगा।
6) :target :- जब हम किसी link के द्वारा same document के किसी content पर जाना चाहें तो हम उस link के href में # लगा कर उस Content के element की id देते हैं। ऐसा करने से वह element एक target element बन जाता हैं जिसे styling देने के लिए यह class use की जाती हैं।
For e.g.
<html>
<head>
<style>
:target {
background-color: blue;
}
#box
{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href =“#box” >Go to box</a>
–
–
–
–
–
<div id = “box”> This is a div </div>
</body>
</html>
ऊपर दिए example में यदि div document में बहुत नीचे भी हो, तब भी link पर click करने पर focus div पर जाएगा।
7) :enabled :- यह pseudo class ऐसे elements को target करती हैं जो by default enabled हों।
For e.g.
<html>
<head>
<style>
input:enabled
{
background-color: red;
}
</head>
</style>
<body>
<input type =“text”><br>
<input type =“text” disabled>
</body>
</html>
क्यूंकि हमने दूसरे text field को disabled declare किया है, इसलिए styling केवल पहली text field पर ही apply होगी जो by default enabled है|
8) :disabled :- यह pseudo class ऐसे elements को target करती हैं जो disabled हों।
For e.g.
<html>
<head>
<style>
input:disabled{
background-color: yellow;
}
</style>
</head>
<body>
<input type =“text” disabled><br>
<input type =“text”>
</body>
</html>
9) :checked :- यह pseudo class उन checkboxes को target करती हैं जो check किए गए हों।
For e.g.
<html>
<head>
<style>
#check-box:checked
{
height: 34px;
width: 34px;
}
</style>
</head>
<body>
<input type =“checkbox” id =“check_box”>
</body>
</html>
इस checkbox को check करने पर इसकी height और width 34px हो जाएँगी।
