CSS selectors are patterns used to select the HTML elements you want to style. They are one of the most fundamental concepts in CSS and allow you to target elements with precision.

Why Selectors Matter:

• Precision: Target specific elements without affecting others
• Maintainability: Write cleaner, more organized CSS
• Efficiency: Reduce the amount of CSS needed
• Power: Create complex styling relationships between elements

Basic selectors are the foundation of CSS targeting. They include element, class, ID, and universal selectors.

Examples in Practice:

/* Targets all paragraph elements */
p {
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Targets all elements with class="button" */
.button {
    padding: 10px 20px;
    background-color: #4e73df;
    color: white;
    border: none;
    border-radius: 4px;
}

/* Targets the element with id="main-nav" */
#main-nav {
    background-color: #333;
    padding: 15px;
}

Combinator selectors allow you to target elements based on their relationship to other elements in the document tree.

Combinator Examples:

/* Targets any paragraph inside a div, at any nesting level */
div p {
    color: blue;
}

/* Targets only direct child paragraphs of a div */
div > p {
    font-weight: bold;
}

/* Targets only the paragraph immediately after a div */
div + p {
    margin-top: 20px;
}

Pseudo-selectors allow you to style elements based on their state or to style specific parts of elements.

Common Pseudo-classes:

Common Pseudo-elements:

Pseudo-selector Examples:

/* Style links on hover and focus */
a:hover, a:focus {
    color: #e74a3b;
    text-decoration: underline;
}

/* Style every other table row */
tr:nth-child(even) {
    background-color: #f8f9fc;
}

/* Add quotation marks before blockquotes */
blockquote::before {
    content: "“";
    font-size: 2em;
    color: #4e73df;
}

/* Style the first line of paragraphs */
p::first-line {
    font-weight: bold;
    color: #2e59d9;
}

Attribute selectors allow you to target elements based on their attributes or attribute values.

Attribute Selector Examples:

/* Style all elements with a title attribute */
[title] {
    border-bottom: 1px dotted #ccc;
}

/* Style external links (starting with http) */
a[href^="http"]::after {
    content: " ↗";
}

/* Style PDF links */
a[href$=".pdf"]::before {
    content: "📄 ";
}

/* Style email links */
a[href^="mailto:"]::before {
    content: "✉️ ";
}

/* Style required form fields */
input[required] {
    border-left: 3px solid #e74a3b;
}

Specificity is the algorithm browsers use to determine which CSS property values are the most relevant to an element and will be applied.

Specificity Examples:

/* Specificity: 0-0-1 */
div {
    background-color: blue;
}

/* Specificity: 0-1-0 */
.conflict-element {
    background-color: green;
}

/* Specificity: 1-0-0 */
#specificityExample1 {
    background-color: red;
}

Specificity is calculated using a three-number system: (a-b-c), where:

• a: Number of ID selectors
• b: Number of class, attribute, and pseudo-class selectors
• c: Number of element and pseudo-element selectors

Specificity Calculation Examples:

Understanding and properly managing specificity is crucial for writing maintainable CSS.

Key Specificity Rules:

1. Cascade Order: When specificity is equal, the last rule declared wins
2. Inheritance: Some properties inherit values from parent elements
3. !important Rule: Overrides all specificity calculations (use sparingly!)
4. Inline Styles: Have higher specificity than any selector (except !important)

Specificity Conflict Example:

Best Practices for Managing Specificity:

• Use classes for most styling - They have moderate specificity and are reusable
• Avoid using IDs for styling - They create specificity issues that are hard to override
• Keep specificity low - This makes your CSS easier to maintain and override
• Avoid !important - It breaks the natural cascade and creates maintenance problems
• Use methodologies like BEM - They provide a structured approach to naming that avoids specificity issues

Test different CSS selectors and see how they affect elements in real-time:

/* No CSS applied yet */