Thread by @Insharamin

What are CSS Combinators?

Come let's discuss them one by one.

A Thread 👇

A combinator is something that defines the relation between selectors.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator.

Types of Combinators:

1️⃣ Descendant selector
2️⃣ Child selector
3️⃣ Adjacent sibling selector
4️⃣ General sibling selector

1️⃣ Descendant selector (space)

The descendant selector matches all elements that are descendants of a specified element.

If we have to select the h1 elements that are the children of an <div> element, then by using the descendant selector, it will be written as follows:

2️⃣ Child selector(>)

A child selector is used to select the element that is the immediate child of the specified element.

In this example, we are selecting the <li> elements that are the direct child of the <ul> element.

3️⃣ Adjacent sibling selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

If we have to select the <p> elements that comes immediately after <h1>, then by using adjacent selector, it will be written as follows:

4️⃣ General sibling selector (~)

The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element.

Example- To selects all <p> elements that are next siblings of <div> elements:

That's all for this thread. If you found it useful consider retweeting the first one. It would mean a lot😊🙌