CSS Combinator Selectors

deyrupak

Rupak Dey

Posted on February 5, 2021

CSS Combinator Selectors

.abc.xyz

Chained Class Selector : will select elements that have both class names.

.nav__item.selected {
   color : #fff;
}
Enter fullscreen mode Exit fullscreen mode


.abc .xyz

Descendant Selector : will select all matching elements inside parent element.

.div img {
   width : 100%;
}
Enter fullscreen mode Exit fullscreen mode


.abc > .xyz

Direct Descendant Selector : will select only direct children of the parent and ignore elements that are nested further.

.nav > .li {
   font-size : 2rem;
}
Enter fullscreen mode Exit fullscreen mode


.abc + .xyz

Adjacent Sibling Selector : will select first element immediately preceded by the former element.

.list-item + .list-item {
   color : #3254a8;
}
Enter fullscreen mode Exit fullscreen mode


.abc ~ .xyz

General Sibling Selector : will select all sibling elements on the same level.

.container ~ p {
   font-size : 2rem;
}
Enter fullscreen mode Exit fullscreen mode


Save it. Its time to show your CSS skills!

💖 💪 🙅 🚩
deyrupak
Rupak Dey

Posted on February 5, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS Combinator Selectors
css CSS Combinator Selectors

February 6, 2021

CSS Combinator Selectors
css CSS Combinator Selectors

February 5, 2021

5 CSS Tricks Nobody Tells You!
css 5 CSS Tricks Nobody Tells You!

January 26, 2021