Vários seletores combinados em CSS
Para selecionar um elemento que corresponda a vários seletores ao mesmo tempo, você precisa escrever esses seletores juntos, sem espaço.
Por exemplo, o seguinte seletor selecionará o elemento
que tem simultaneamente a classe bbb e a classe
zzz:
.bbb.zzz {
}
E o seguinte seletor selecionará o cabeçalho h2,
que tem simultaneamente a classe bbb e a classe
zzz:
h2.bbb.zzz {
}
Dessa maneira, você pode construir combinações arbitrárias de seletores. A ordem dos seletores usados não importa, exceto pela regra de que os seletores de tag devem ser colocados no início.
Ou seja, por exemplo, os seletores .bbb.zzz
e .zzz.bbb são completamente equivalentes.
Além disso, você pode formar seletores
usando id, por exemplo:
#elem.eee, ou h2#elem.eee,
ou h2.eee#elem e assim por diante.
Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que atenda a esse seletor. Aqui está o código com o seletor:
.bbb.zzz {
color: red;
}
Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que atenda a esse seletor. Aqui está o código com o seletor:
h2.bbb.zzz {
color: red;
}
Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que atenda a esse seletor. Aqui está o código com o seletor:
#elem.bbb {
color: red;
}
Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que atenda a esse seletor. Aqui está o código com o seletor:
#elem.bbb.zzz {
color: red;
}
Explique o que o seletor no código abaixo seleciona. Em seguida, escreva o código HTML que atenda a esse seletor. Aqui está o código com o seletor:
h2#elem.bbb {
color: red;
}
