CSS Selectors

Basic Selectors

Universal Selector

Selects all elements:

* {
  margin: 0;
  padding: 0;
}

Type Selector

Selects elements by tag name:

h1 {
  color: navy;
}

p {
  line-height: 1.6;
}

Class Selector

Selects elements with a specific class attribute:

.button {
  background: blue;
  color: white;
}

.button.primary {
  background: darkblue;
}

ID Selector

Selects a single element with a specific ID:

#header {
  background: #333;
}

Attribute Selectors

Select elements by their attributes:

/* Elements with href attribute */
a[href] {
  color: blue;
}

/* Exact attribute value */
input[type="text"] {
  border: 1px solid gray;
}

/* Attribute value contains word */
[class~="highlight"] {
  background: yellow;
}

/* Attribute value starts with */
[href^="https"] {
  color: green;
}

/* Attribute value ends with */
[href$=".pdf"] {
  color: red;
}

/* Attribute value contains */
[href*="example"] {
  text-decoration: underline;
}

Grouping Selectors

Apply the same styles to multiple selectors:

h1, h2, h3 {
  font-family: Arial;
}

Combinators

Combinators describe the relationship between selectors.

Descendant Selector (space)

Selects all elements inside another element:

/* All <p> inside <div> */
div p {
  color: blue;
}

Child Selector (>)

Selects direct children only:

/* Only <p> that are direct children of <div> */
div > p {
  color: red;
}

Adjacent Sibling (+)

Selects the first sibling immediately after:

/* First <p> after any <h1> */
h1 + p {
  font-weight: bold;
}

General Sibling (~)

Selects all siblings after:

/* All <p> siblings after <h1> */
h1 ~ p {
  color: gray;
}

Nesting Selector (&)

Modern CSS nesting:

.card {
  background: white;
  
  & .title {
    font-size: 1.5rem;
  }
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

Pseudo-classes and Pseudo-elements

Pseudo-classes

Select elements in a specific state:

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

/* Form states */
input:focus {
  border-color: blue;
  outline: none;
}

input:disabled {
  background: gray;
}

input:checked {
  accent-color: blue;
}

/* Structural */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-child(3n+1) { color: red; }

/* Other useful ones */
p:not(.special) { color: gray; }
div:has(> img) { border: 1px solid; }

Pseudo-elements

Select and style specific parts of an element:

/* First line of text */
p::first-line {
  font-weight: bold;
}

/* First letter */
p::first-letter {
  font-size: 2em;
}

/* Before/After content */
.quote::before {
  content: '\"';
}

.quote::after {
  content: '\"';
}

/* Custom marker */
li::marker {
  color: red;
}

/* Placeholder text */
input::placeholder {
  color: gray;
}

/* Tooltip example */
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: black;
  color: white;
  padding: 4px 8px;
}