O problema
A professora usou do children para poder passar qualquer nível de heading e, creio eu, com objetivo do estilo ser aplicado independente do nível do Heading, porém o seletor cobre apenas o nível 1 dos headings.
Para resolver isso, podemos usar das pseudo-classes is ou where.
O que é?
São pseudo-classes que recebem uma lista de seletores e selecionam qualquer elemento que possa ser selecionado por um dos seletores dessa lista.
Facilita a aplicação de um mesmo estilo para vários seletores diferentes e combinados, simplificando a leitura e escrita.
Exemplo simples de uso:
/* Sem a pseudo-classe */
section h1,
article h1,
aside h1,
nav h1 {
font-size: 25px;
}
/* Com a pseudo-classe */
is(section, article, aside, nav) h1 {
font-size: 25px
}A mesma sintaxe aplica-se ao where, porém trocando o is por where
A diferença entre os dois é que o is possui uma especificidade de "0, 0, 1", enquanto o where não possui especificidade, ou seja, tem "0, 0, 0"
Possível resolução
Um possível CSS com o uso do is:
.texto :is(h1, h2, h3, h4, h5, h6, p) {
font-size: 32px;
font-weight: 500;
text-align: center;
}
