CSS Selector kya hai
: Css selectors ka use hum html element ko select karne ke liya use karte hai
jisko hume customize yha style dena hota hai.
- Css selector ko 5 categories mein divide kiya hai, lekin hum simple selector he samjega jo sabse zyada use hota hai,
- Simple selector mein element ka name, id and class use hoti hai.
Simple Selector
- Element Selector
- Id Selector
- Class Selector
Element Selector :
Element selector mein hum html ke element ko select karte hai uske name sa,
Yaad rakna html ke element ko hum select karte hai uske naam sa
Example :
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Programming Warrior</p>
<p>Be a Warrior not a Worrier</p>
</body>
</html>
Output:
- Upper deko p jo humne <style> ke ander lika hai, uska necha html mein element mein name <p> hai or humne css mein sirf p lik kar style kiya hai
Id Selector :
Isme
hum phela html mein ek unique id banate hai jisko hum fir css mein easily acess
kar sakte hai, app html mein bhaut sara element ka use karoga to apko kisi
particular element ko style karna hoga to id ka use kar sakte hai
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#t1{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p id="t1">Programming Warrior</p>
<p>Be a Warrior not a Worrier</p>
</body>
</html>
Output:
- App dek sakte hai mena sirf ek he p element ko id di thi or css mein ussi ka sirf style bhi change hua.
Note: Ek baat hamesha yaad rakna jab
app upper style mein id ko use karoge to app # phela lagana uss id ko zururi
hai hai .
Class Selector: Class
selector bhi html element ko select karta with specific class attribute.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.warrior{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p id="t1">Programming Warrior</p>
<p class="warrior">Be a Warrior not a Worrier</p>
</body>
</html>
Output:
App dek sakte hai
isme mena sirf style ko use kiya
I hope apko samaj a
gaya hoga or app isko khud sa pratice karoge jissa or achha sa app samaj
sakogge.