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!

Connect with me : Github | Tutoring | Freelance Web Dev

Comments

[AMANKANOJIYA]

.container ~ p {
font-size : 2rem;
}
Sir, I do not understand. Can you pls Give me an Example

[Ilja]

here you go

[AMANKANOJIYA]

Thank you So much, sir. It will help me a lot. I got it as it will grab all elements from the container in which ~ is defined

[Rupak Dey]

Thank You! :D

[Rupak Dey]

That's a great example by @sir_zellot there!

[AMANKANOJIYA]

yes, Sir, I got it