01
Descendant Combinator
Selects elements inside another element.
Parent Container
This paragraph is selected.
This span is also inside.
.parent-box p {
color: #7c3aed;
}
02
Child Combinator
Selects only direct children.
- Direct Child 1
- Direct Child 2
- Nested Child
.parent-list > li {
color: #0891b2;
}
03
Next Sibling Combinator
Selects the element immediately after another element.
Heading
This is the next sibling.
This is another paragraph.
h3 + p {
color: #e11d48;
}
04
Subsequent Sibling Combinator
Selects all matching siblings after an element.
Starting Point
Sibling 1
Sibling 2
Sibling 3
h3 ~ p {
color: #16a34a;
}
Pseudo-Classes
Style elements according to their state or position.
🖱️
:hover
Move your mouse over this card.
⌨️
:focus
Click inside the input.
✨
:nth-child()
HTML
CSS
JavaScript
Bootstrap
🎯
:first-child
- First Item
- Second Item
- Third Item
🏁
:last-child
- Practice
- Revision
- Consistency
🌐
:lang()
This text is in English.