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 (6)

Collapse
amankanojiya profile image
AMANKANOJIYA

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

Collapse
sir_zellot profile image
Ilja Zelenov • Edited

here you go

Collapse
amankanojiya profile image
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

Collapse
deyrupak profile image
Rupak Dey Author

Thank You! :D

Collapse
deyrupak profile image
Rupak Dey Author

That's a great example by @sir_zellot there!

Collapse
amankanojiya profile image
AMANKANOJIYA

yes, Sir, I got it