A COMPLETE GUIDE TO CSS COMBINATORS

Hope u all have been doing well n staying safe in this COVID pandemic. Here are the 4 CSS Combinators which will boost your CSS experience 🔥

What is Combinator ❓

💠 A combinator is something that explains the relationship between CSS selectors.

💠 A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

Why use CSS Combinator ❓

💠 Learning about combinators makes you better at writing CSS and helps you to avoid excess CSS code.

💠 Combinators can also help you pinpoint the section or part of HTML you want to style with high accuracy because they are based on the relationship between the selectors.

Types of Combinators available in CSS 🎆

There are four types of combinators in CSS:

🧿 General Sibling selector ( ~ )

🧿 Adajacent Sibling selector ( + )

🧿 Child selector ( > )

🧿 Descendant selector ( space )

💡 General Sibling selector ( ~ )

The General Sibling selector is used to select the element that follows the first selector element.

Syntax:

first-selector ~ target-selector { … }

💡 ADJACENT SIBLING SELECTOR

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Syntax:

first-selector + adjacent-selector { }

💡 CHILD SELECTOR

The child selector selects all elements that are the children of a specified element.

Syntax:

elementl > element2 { … }

💡 DESCENDANT SELECTOR

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

Syntax:

selector1 selector2 { … }

If anything is not clear or you want to point out something, please reach me

Like this article? Follow @saravanan.vijayamuthu on Instagram

My Website → https://saravananvijayamuthu.herokuapp.com/

Weather app → https://gadot.vercel.app/

Github → https://github.com/SaravananVijayamuthu

Little Occult Affairs → https://www.amazon.in/dp/8194619920/ref=cm_sw_r_cp_apa_i_GEHnFbXWYB45D