CSS: Basic Selectors
Tags: beginners, tutorial, css, webdev
Published: 2020-04-05 19:33:30

We left off with the questions:
- What if we want certain div elements to have a different background colour or border? 
- What if we only want one of our p elements to have a font size of 12px?

The answer to those two questions is selectors. A selector is basically how we determine which element the styles will be applied.

# 1. Universal

[`*`]: Selects all elements.

```css
* {
  color: red;
}
```

# 2. Element

[`selector`]: Selects all elements that matches the name.

```css
div {
  background-color: red;
}

h1 {
  color: blue;
}
```

# 3. Id

[`#id`]: Selects the element whose id matches the selector. The selector starts with a pound symbol (`#`) followed by the element's id.

```html
<h1 id="special-heading">Heading 1</h1>
```

```css
#special-heading {
  color: red;
}
```

# 4. Class

[`.class`]: Selects all elements whose class attribute matches the selector. The element can have more than one class. The selector starts with a period (`.`) followed by one of the element's classes.

```html
<h1 class="red bold">Red and Bold</h1>
<h1 class="blue bold">Blue and Bold</h1>
<h1 class="bold">Bold</h1>
<h1 class="blue">Blue</h1>
```

```css
.red {
  color: red;
}

.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}
```

# 5. Attribute

[`[attr=value]`]: Selects the elements whose attribute-value pair matches the selector.

```html
<input type="email" name="email" />
<input type="submit" />
```

```css
[name="email"] {
  background: blue;
}

[type="submit"] {
  background: red;
}
```

---

# 6. Descendant

[`selector selector`]: The descendant selector is used when you want apply styling to descendants of an element.

```html
<div class="container">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>
<div class="container-2">
  <div class="container-footer">
    <h2>Heading 2</h2>
    <div>
      <p>Paragraph</p>
    </div>
  </div>
</div>
```

```css
.container h2 {
  color: blue;
}

.container p {
  color: red;
}

div .container-footer p {
  font-size: 8px;
}
```

**[Demo](https://jsfiddle.net/koralarts/9cyd06mb/6/)**

# 7. Direct Descendant

[`selector > selector`]: The direct descendant selector is similar to the regular descendant except styling is only applied to direct descendants.

```html
<section>
  <p>Paragraph</p>
  <div>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <div>
      <p>Paragraph 4</p>
    </div>
  </div>
</section>
```

```css
section > p {
  color: blue; 
}

section > div > p {
  color: red;
}
```

**[Demo](https://jsfiddle.net/koralarts/mchkf74w/6/)**

# 8. Sibling

[`selector ~ selector`]: Sibling selectors applies the styling to sibling elements that matches the selector following the previous selector.

```html
<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
```

```css
p ~ .red {
  color: red;
}

h1 ~ .red ~ p {
  color: pink;
}
```

**[Demo](https://jsfiddle.net/koralarts/05npfcr2/3/)**

# 9. Adjacent Sibling

[`selector + selector`]: Direct Sibling selectors are similar to the sibling selector but it only applies the style to the next sibling element if it matches the selector.

```html
<h1>Heading 1</h1>
<p class="red">Paragraph 1</p>
<p>Paragraph 2</p>
<h1 class="red">Heading 2</h1>
<p>Paragraph 3</p>
<span class="red">Span 1</span>
```

```css
h1 + .red {
  color: red;
}

h1 + .red + span {
  color: pink;
}
```

**[Demo](https://jsfiddle.net/koralarts/uz63cmys/1/)**

---

# 10. Multiple Selectors

[`selector, selector`]: Combine selectors.

```css
#special-heading,
.red,
h1 ~ div > p,
ul > li > p + span {
  color: red;
}
```

---

Now that we know more about the basic selectors, we'll talk about the box model in the next post.