.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
Top comments (6)
.container ~ p {
font-size : 2rem;
}
Sir, I do not understand. Can you pls Give me an Example
here you go
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
Thank You! :D
That's a great example by @sir_zellot there!
yes, Sir, I got it