Combinadores CSS
Combinadores CSS
Um combinador é algo que explica a relação entre os seletores.
Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.
Existem quatro combinadores diferentes em CSS:
- seletor descendente (espaço)
- seletor filho (>)
- seletor irmão adjacente (+)
- seletor geral de irmãos (~)
Seletor de Descendentes
O seletor descendente corresponde a todos os elementos que são descendentes de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> dentro dos elementos <div>:
Exemplo
div p {
background-color: yellow;
}
Seletor filho (>)
O seletor filho seleciona todos os elementos que são filhos de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que são filhos de um elemento <div>:
Exemplo
div > p {
background-color: yellow;
}
Seletor de irmãos adjacentes (+)
O seletor irmão adjacente é usado para selecionar um elemento que está diretamente após outro elemento específico.
Elementos irmãos devem ter o mesmo elemento pai, e "adjacente" significa "imediatamente a seguir".
O exemplo a seguir seleciona o primeiro elemento <p> que é colocado imediatamente após os elementos <div>:
Exemplo
div + p {
background-color: yellow;
}
Seletor Geral de Irmãos (~)
O seletor irmão geral seleciona todos os elementos que são os próximos irmãos de um elemento especificado.
O exemplo a seguir seleciona todos os elementos <p> que são os próximos irmãos dos elementos <div>:
Exemplo
div ~ p {
background-color: yellow;
}
Todos os seletores de combinação CSS
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |