lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Combinator

A combinator allows you to combine CSS selectors to create more complex selectors.

Let's analyze combinators through the following example.

<br />

## Code Example of Combinators

```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:

- *my-class*: The text color of elements with this class will be red.

- *#my-id*: The font size of elements with this ID will be 24px.

- *p + h1*: The `<h1>` that comes immediately after a `<p>` will have a light blue background.

- *h1.your-class*: Among `<h1>` tags, elements with the class `your-class` will have bold text.

<br />

Try entering the parts emphasized with asterisks in the code.