CSS Selectors

CSS Selectors म्हणजे specific HTML elements निवडणे आणि त्यांना styles apply करणे. Selectors नीट माहित असणे म्हणजे page च्या exactly हव्या त्या भागाला style देता येते.

1. Universal Selector — * (सगळ्यांना)

* selector म्हणजे page च्या सगळ्या elements ला target करणे. Reset CSS साठी खूप वापरतात.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* सगळ्या elements ला apply होते */
}

2. Element Selector (Type Selector)

HTML tag च्या नावाने specific elements target करतो. सगळ्या त्या tags ला apply होते.

p {
    text-decoration: underline;
    color: gray;
}
/* Page वरील सगळ्या <p> elements ला apply होतो */

h1 {
    font-size: 48px;
    color: orange;
}

3. ID Selector — # (Unique Element)

# notation ने specific id असलेल्या element ला target करतो. ID unique असतो — एका page वर एकच.

/* CSS मध्ये */
#main-title {
    text-align: center;
    color: red;
}

/* HTML मध्ये */
/* <h1 id="main-title">मराठी Tech</h1> */

4. Class Selector — . (Group Elements)

. notation ने specific class असलेल्या सगळ्या elements ला target करतो. Multiple elements एक class share करू शकतात.

/* CSS */
.highlight {
    background-color: yellow;
    color: black;
}

/* HTML */
/* <p class="highlight">हा paragraph highlighted आहे</p> */
/* <h2 class="highlight">हे heading पण highlighted आहे</h2> */

5. Group Selector — , (Multiple Targets)

Comma (,) ने multiple selectors एकत्र लिहता येतात. Code duplication कमी होतो.

/* h1, h2, h3 — सगळ्यांना एकाच वेळी */
h1, h2, h3 {
    font-family: 'Georgia', serif;
    color: orange;
}

/* p आणि a दोन्हींना */
p, a {
    color: #e5e7eb;
    line-height: 1.6;
}