What are CSS Selectors?

CSS selectors are patterns used to select and style HTML elements. They are the foundation of CSS and allow you to target specific elements or groups of elements on your webpage.

Why Selectors Matter:

• Precision: Target exactly the elements you want to style
• Efficiency: Apply styles to multiple elements at once
• Maintainability: Create organized and readable CSS
• Specificity: Control which styles take precedence

1. Element Selector

Targets all elements of a specific type.

/* Targets all paragraph elements */
p {
    color: blue;
    font-size: 16px;
    line-height: 1.6;
}

/* Targets all heading elements */
h1, h2, h3 {
    color: #333;
    font-weight: bold;
}

2. Class Selector

Targets elements with a specific class attribute.

/* Targets elements with class="highlight" */
.highlight {
    background-color: yellow;
    padding: 5px;
    border-radius: 3px;
}

/* Multiple classes */
.button.primary {
    background-color: #007bff;
    color: white;
}

3. ID Selector

Targets a specific element with a unique ID.

/* Targets element with id="header" */
#header {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

/* Note: IDs should be unique on a page */
#main-content {
    max-width: 1200px;
    margin: 0 auto;
}

Descendant Selector

Targets elements that are descendants of another element.

/* Targets all p elements inside div elements */
div p {
    margin: 10px 0;
    color: #666;
}

/* Targets all li elements inside ul elements */
ul li {
    list-style-type: disc;
    margin-bottom: 5px;
}

Child Selector

Targets direct child elements only.

/* Targets direct p children of div */
div > p {
    border-left: 3px solid #007bff;
    padding-left: 10px;
}

/* Targets direct li children of ul */
ul > li {
    font-weight: bold;
}

Adjacent Sibling Selector

Targets the first sibling that follows immediately after.

/* Targets p that immediately follows h1 */
h1 + p {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
}

General Sibling Selector

Targets all siblings that follow.

/* Targets all p elements that follow h1 */
h1 ~ p {
    text-indent: 20px;
}

Common Pseudo-classes

/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* Form states */
input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

input:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* Position-based */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background-color: #f8f9fa; }
li:nth-child(even) { background-color: white; }

/* State-based */
.checkbox:checked + label {
    text-decoration: line-through;
}

Common Pseudo-elements

/* First letter */
p::first-letter {
    font-size: 2em;
    color: purple;
    float: left;
    margin-right: 5px;
}

/* First line */
p::first-line {
    font-weight: bold;
    color: #333;
}

/* Before and After content */
.button::before {
    content: "→ ";
    margin-right: 5px;
}

.button::after {
    content: " ←";
    margin-left: 5px;
}

/* Selection */
::selection {
    background-color: yellow;
    color: black;
}

Specificity Rules

CSS specificity determines which styles are applied when there are conflicting rules. Higher specificity wins.

Specificity Hierarchy (from highest to lowest):

1. Inline styles: 1000 points
2. ID selectors: 100 points
3. Class selectors, attributes, pseudo-classes: 10 points
4. Element selectors, pseudo-elements: 1 point

Specificity Examples

/* Specificity: 1 point */
p { color: black; }

/* Specificity: 10 points */
.highlight { color: yellow; }

/* Specificity: 11 points (10 + 1) */
p.highlight { color: orange; }

/* Specificity: 100 points */
#header { color: blue; }

/* Specificity: 101 points (100 + 1) */
#header p { color: red; }

/* Specificity: 111 points (100 + 10 + 1) */
#header p.highlight { color: green; }

Selector Best Practices

• Use classes for reusable styles: Classes are more flexible than IDs
• Avoid overly specific selectors: Keep selectors as simple as possible
• Use meaningful names: Choose descriptive class and ID names
• Limit nesting: Don't nest selectors more than 3-4 levels deep
• Use BEM methodology: Block__Element--Modifier naming convention
• Consider performance: Simple selectors are faster to process

BEM Naming Convention

/* Block */
.card { }

/* Element */
.card__title { }
.card__content { }
.card__button { }

/* Modifier */
.card--featured { }
.card__button--primary { }
.card__button--secondary { }