CSS Combinator Selectors

.abc.xyz

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

.nav__item.selected {
   color : #fff;
}

.abc .xyz

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

.div img {
   width : 100%;
}

.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;
}

.abc + .xyz

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

.list-item + .list-item {
   color : #3254a8;
}

.abc ~ .xyz

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

.container ~ p {
   font-size : 2rem;
}

Save it. Its time to show your CSS skills!