Modules > CSS Basics > Basic Selectors

CSS Basic Selectors

Element Selectors

The most basic CSS selectors are Element Selectors (also sometimes called type selectors).

That's a super secret fancy code phrase for, we're just using the HTML tag as a selector.

For example, if we wanted to make all paragraphs have red text, and our page to have an aqua background, we would use the following CSS rule:

p {
  color: red;
}

body {
  background: aqua;
}

Multiple Selectors

If we wanted to do the following

• Color all ordered lists red
• Color all unordered lists red
• Color all paragraphs red

ol {
  color: red;
}

ul {
  color: red;
}

p {
  color: red;
}

Combining Multiple Selectors

The previous example works just fine, but we're doing an awful lot of repeating and unnecessary typing.

We can combine these three rules, by listing the selectors, separated by commas.

p, ol, ul {
  color: red;
}

Related Resources

• Simple selectors [MDN Tutorials]
• Selectors introduction [MDN Tutorials]
• Basic selectors & Combinators [MDN Reference]
• CSS Almanac - Selectors [CSS-Tricks]

Modules > CSS Basics > Basic Selectors