A complete guide to CSS combinators in 2022. You can find everything you need to know about CSS Combinators in this blog. Hey 👋, I am Kunaal. In the article, we'll talk about something called CSS Combinators. You may have seen something like or and that's exactly what we are going to discuss in this blog. So without ado, let's get started. div ~ span div > p 📌 What are Combinators ? They are the combination of simple CSS selectors. What do I mean? The class selector, id selector, or even tag selectors - everything in CSS is a simple selector and when we use more than 1 selector it makes a combinator selector. For instance; and are simple selectors but together they are combinator selectors. div p div p Basically, the combinator selector defines a relationship between the selectors. 1. Descendant Selector It basically selects all the elements inside or descendant to the specified element. For instance; } div p { color : red; It will colour/style all the elements inside elements including all the nested elements. Nested elements are those that are nested in a container like <p> <div> <p> < div > < p > Paragraph </ p > < h1 > < p > Nested Paragraph </ p > < h1 > </ div > 2. Child Selector ( > ) Its selects all the elements inside the specified element excluding the nested elements. For instance, } div > p { color : red; So the above example will select all the elements of element but it will not affect the nested elements. <p> <div> <p> 3. Adjacent Sibling Selector (+) Adjacent Sibling Selector selects the elements just after element of the specified element. For instance, } div + p { color : red; So the above code will only select the element which is just after the element. Example - <p> <div> 4. General Sibling Selector (~) This is the last one and it selects all the elements after the specified element. For instance, } div ~ p { color : red; The above example will select all the elements after the element. Example: <p> <div> 📌 Wrap up So that's it. This was all about CSS Combinators, I hope you liked the article and this article was helpful for you. If you liked it or don't want to miss out  on more interesting web dev tips and tricks, you can follow me on my or you can just simple subscribe my channel if you want to master web development. Instagram YouTube Thanks for reading

Instagram

YouTube

Read My Stories

Support Me On Patreon

Buy Me a Coffee

My Youtube Channel

Too Long; Didn't Read

Make resilience your competitive advantage

CSS Combinators : Mastering the Use of Multiple CSS Selectors

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps