How to use CSS selectors

Select by element

A type selector matches every element with that tag name.

h2 {
  margin-block-start: 2rem;
}

Use relationships

Combinators describe where an element appears. A space means descendant; > means direct child.

article p { line-height: 1.7; }
nav > ul { list-style: none; }

Select by attribute

Attribute selectors are useful when markup already exposes a meaningful state or value.

input[required] { border-left: 4px solid #b42318; }
a[href^="https://"] { text-decoration-style: dotted; }

Keep selectors maintainable

• Group selectors with commas only when they share every declaration
• Prefer short selectors based on stable classes
• Avoid styling broad descendants when the rule should be local
• Do not rely on HTML structure that is likely to change