DEV Community

loading...

CSS Combinator Selectors

Rupak Dey
Web Dev | React | Python
・1 min read

.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!

Discussion (0)