lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Combinators

Combinators are used in CSS to combine selectors and create more complex selections.

Let's review the combinators we've learned so far.

<br />

1. **Type Combinator**: Selects multiple types of elements.

   - Example: `p, h1`

   ```css title="CSS"
   p,
   h1 {
     font-weight: bold;
   }
   ```

2. **Class Combinator**: Selects elements with multiple classes.

   - Example: `.my-class, .your-class`

   ```css title="CSS"
   .my-class,
   .your-class {
     color: blue;
   }
   ```

3. **Adjacent Sibling Combinator**: Selects an element that is immediately preceded by a sibling element.

   - Example: `p + h1`

   ```css title="CSS"
   p + h1 {
     margin-top: 10px;
   }
   ```

4. **General Sibling Combinator**: Selects all sibling elements that follow a specified element.
   - Example: `p ~ h1`
   ```css title="CSS"
   p ~ h1 {
     text-decoration: underline;
   }
   ```

<br />

## Combinator Code Example

```html title="HTML"
<body>
  <p>First paragraph</p>
  <h1>Heading 1</h1>
  <h1 class="my-class">Heading 2</h1>
  <p class="your-class">Second paragraph</p>
  <div id="my-id">My ID</div>
  <div id="your-id">Your ID</div>
</body>
```

```css title="CSS"
.my-class {
  color: red;
}

#my-id {
  font-size: 24px;
}

p + h1 {
  background-color: lightblue;
}

h1.your-class {
  font-weight: bold;
}

#your-id {
  text-decoration: underline;
}
```

In this example, the CSS is applied as follows:

- All `<p>` and `<h1>` elements will be bold.

- Elements with the `my-class` and `your-class` classes will be blue.

- The font size of elements with the IDs `my-id` and `your-id` is 24px.

- `<h1>` elements immediately following a `<p>` will have a top margin of 10px.

- All `<h1>` elements following a `<p>` will have an underline.

<br />

Follow the emphasized portions of the code as you type it in.

The adjacent sibling combinator (+) selects an element that is immediately preceded by another element. For example, `p + h1` selects an `<h1>` element that immediately follows a `<p>` element.

Combinators

Combinator Code Example

CSS Selector Combinators