Full-stack Web Technologies

CHAPTER 6
Selectors

Selectors represents sets of elements, to which certain rules apply.

By element type (tag)

The most basic selector selects all elements of a certain type (with a certain tag), for instance:

h1 {
  font-size: 24pt;
}
main {
  margin: 0;
}
p {
  padding: 0;
}

This CSS has 3 rules which apply to all first-level headers (<h1>), the <main> element (typically just one), and all paragraphs (<p>).

Union or grouping

A comma between two selectors performs the set union of their sets:

h1 {
  font-size: 24pt;
}
header {
  font-size: 24pt;
}

can be merged into:

h1,
header {
  font-size: 24pt;
}

Descendants

A descendant is an element inside another, at any level. Two selectors separated by a space represent an element of the second set inside an element of the first set.

header a {
  color: green;
}

This rule sets the font color as green only for the anchors within the header.