Lesson 5: Mastering CSS Selectors

What are CSS Selectors?

CSS selectors are patterns used to select the HTML elements you want to style. They are a fundamental part of CSS that allow you to target elements based on their type, class, ID, attributes, and more.

Precision targeting: Selectors let you apply styles to specific elements, groups of elements, or elements in particular states.

Basic Selector Types

Here are the most fundamental CSS selectors you need to know:

Universal Selector

Selects all elements on the page.

* {
  box-sizing: border-box;
}

Type Selector

Selects all elements of a given type.

h1, h2, h3 {
  color: #0d47a1;
}

Class Selector

Selects all elements with a specific class.

.highlight {
  background-color: yellow;
}

ID Selector

Selects a single element with a specific ID.

#main-header {
  border-bottom: 2px solid #2196f3;
}

Advanced Selectors

Take your styling to the next level with these powerful selectors:

Attribute Selectors

Select elements based on their attributes or attribute values.

/* Selects all elements with a title attribute */
[title] {
  border: 1px dotted gray;
}

/* Selects all links with target="_blank" */
a[target="_blank"] {
  color: #ff5722;
}

/* Selects all images with alt text containing "logo" */
img[alt*="logo"] {
  border: 2px solid gold;
}

This has a title attribute

Link with target="_blank"
Regular link

Pseudo-classes

Select elements based on their state or position.

/* Changes link color on hover */
a:hover {
  color: #e91e63;
}

/* Styles every odd list item */
li:nth-child(odd) {
  background: #f5f5f5;
}

/* Styles the first paragraph in a container */
p:first-of-type {
  font-weight: bold;
}

Hover over this link

List item 1
List item 2
List item 3
List item 4

First paragraph in this container

Second paragraph in this container

Combinators

Combine selectors to target elements based on their relationships.

Descendant Selector (space)

div p { color: blue; }

This paragraph is selected

This paragraph is also selected

Child Selector (>)

div > p { color: red; }

This paragraph is selected

This paragraph is NOT selected

Adjacent Sibling (+)

h3 + p { font-style: italic; }

Heading

This paragraph is selected

This paragraph is NOT selected

General Sibling (~)

h3 ~ p { color: green; }

Heading

This paragraph is selected

Some content

This paragraph is also selected

Specificity Hierarchy

When multiple selectors target the same element, CSS uses specificity to determine which styles to apply:

1. Inline Styles (Highest Specificity)

2. ID Selectors

3. Class, Attribute & Pseudo-class Selectors

4. Type & Pseudo-element Selectors (Lowest Specificity)

Remember: The universal selector (*) and combinators (like >, +, ~) have no specificity value. The !important rule overrides all other declarations but should be used sparingly.

Specificity Calculation

Specificity is calculated using a four-part value: (a, b, c, d)

Selector	Specificity Value	Calculation
`h1`	(0,0,0,1)	1 type selector
`.nav-item.active`	(0,0,2,0)	2 class selectors
`#header .logo`	(0,1,1,0)	1 ID + 1 class
`style="color:red"`	(1,0,0,0)	Inline style

Practical Applications

CSS selectors are powerful tools for creating clean, maintainable styles:

Styling Tables

Use :nth-child() for zebra striping and hover effects for better readability.

Navigation Menus

Combine class selectors with pseudo-classes for interactive navigation elements.

Image Galleries

Use attribute selectors to style different types of images consistently.

Form Validation

Leverage :valid, :invalid, and :required for visual feedback.

Real-world Example: Interactive Form

/* Style required fields */
input:required {
  border-left: 3px solid #ff9800;
}

/* Valid field styling */
input:valid {
  border-left: 3px solid #4caf50;
}

/* Invalid field styling */
input:invalid {
  border-left: 3px solid #f44336;
}

/* Focus state */
input:focus {
  box-shadow: 0 0 5px #2196f3;
}

/* Placeholder text */
::placeholder {
  color: #9e9e9e;
  font-style: italic;
}

Best Practices

Follow these guidelines for effective selector usage:

Use classes for reusable styles: Classes are the most flexible and reusable selector type.

Limit ID usage: IDs have high specificity and can only be used once per page.

Keep specificity low: Lower specificity makes your styles easier to override and maintain.

Use semantic class names: Names like .card or .btn-primary are more meaningful than .blue-box.

Avoid over-qualifying selectors: .nav-item is better than ul li.nav-item.

Selector Efficiency

Modern browsers are efficient at processing CSS, but some selector patterns are faster than others:

Selector Pattern	Efficiency	Recommendation
`.class-name`	High	Most efficient and recommended
`element.class`	High	Good for specific targeting
`#id-name`	High	Efficient but use sparingly
`[attribute=value]`	Medium	Useful but slightly less efficient
`:nth-child(n)`	Medium	Powerful but can be expensive

Next Steps

Now that you understand CSS selectors, continue to the next lesson to learn about the CSS Box Model.

Previous Lesson Next Lesson: Box Model