Web/CSS
[CSS] Combinators
llHoYall
2020. 8. 26. 21:20
Descendant Combinator
The descendant combinator uses space.
It selects nodes that are descendants of the first selected element.
This is a usage example.
div span {
color: teal;
}
Child Combinator
The child combinator uses >.
It selects a node that is direct children of the first element.
This is a usage example.
ul > li {
font-weight: 700;
}
Adjacent Sibling Combinator
The adjacent sibling combinator uses +.
It selects adjacent siblings, and it means both elements have the same parent.
This is a usage example.
input + button {
width: 100px;
}
General Sibling Combinator
The general sibling combinator uses ~.
It selects siblings, and it means they have the same parent.
This is a usage example.
span ~ img {
color: tomato;
}
Column Combinator
The column combinator uses ||.
It selects nodes that belong to a column.
This is a usage example.
col || td {
background-color: gold;
}
I've never used this combinator.
반응형