CSS Selectors kya hain?

CSS selectors wo special patterns hote hain jo HTML elements ko select karte hain jinko style dena hota hai.

CSS Selectors ke Prakar

• 1. Element Selector: Direct HTML tag ko select karta hai. Jaise p, h1, div etc.
• 2. Class Selector: Kisi particular class wale element ko select karta hai. CSS me class selector ke aage . lagate hain. Jaise .menu.
• 3. ID Selector: Kisi specific element jiska unique ID hai usko select karta hai. ID selector ke aage # lagate hain. Jaise #header.
• 4. Universal Selector: Sabhi elements ko select karta hai. Iske liye * symbol ka use hota hai.
• 5. Attribute Selector: Kisi element ke kisi attribute ke basis par select karta hai. Jaise a[href] selects sabhi links.
• 6. Descendant Selector: Kisi element ke andar ke kisi child element ko select karta hai. Jaise div p selects div ke andar jo p hain.
• 7. Child Selector: Direct child elements ko select karta hai. Jaise ul > li.
• 8. Pseudo-class Selector: Elements ke special states ko select karta hai, jaise a:hover.
• 9. Pseudo-element Selector: Element ke kisi hisse ko select karta hai, jaise p::first-letter.

Examples:

/* Element Selector */
p {
  color: blue;
}

/* Class Selector */
.menu {
  background-color: lightgray;
}

/* ID Selector */
#header {
  font-weight: bold;
}

/* Universal Selector */
* {
  margin: 0;
  padding: 0;
}

/* Attribute Selector */
a[target="_blank"] {
  color: red;
}

/* Descendant Selector */
div p {
  font-style: italic;
}

/* Child Selector */
ul > li {
  list-style-type: square;
}

/* Pseudo-class Selector */
a:hover {
  color: green;
}

/* Pseudo-element Selector */
p::first-letter {
  font-size: 2rem;
  font-weight: bold;
}

CSS selectors se aap apni website ke design ko bahut hi flexible aur powerful tarike se control kar sakte hain.