Seletor não da certo

Something does not look right. You added the correct class attribute value to the p element with Donut as its text, but you have not defined a selector for it.

Since the flavor class selector already has the properties you want, just add the dessert class name to it.

.flavor .dessert{
text-align: left;
width: 75%;

You should add the .dessert selector to your .flavor selector.
}

Ajuda !

Boas-vindas ao fórum do freeCodeCamp, @igoreis02! Movi seu tópico para a seção de português em função do título. Espero que não se importe. Não sei se entendi corretamente qual era o problema. Vejo esse código e a única coisa que vejo de errado é o fato de You should add the .dessert selector to your .flavor selector. estar dentro da regra do CSS (não devia estar).

No CSS, você deveria ter o seguinte:

.flavor .dessert{
text-align: left;
width: 75%;
}

Espero que isso resolva o problema! Bons estudos! :smiley:

Olá, tudo bem? Não é necessário os seletores serem divido por vírgula?

.flavor, .dessert {
    text-align: left;
    width: 75%;
}
5 Likes

Boa, @gustavo.afc! Obrigado por pegar essa!

A sequência .flavor .dessert é possível se .dessert for um elemento filho de .flavor. Com a vírgula, .flavor, .dessert, o seletor buscará todos os elementos .flavor e todos os elementos .dessert.

A propósito, estamos falando do Passo 52 de Aprenda CSS básico criando um menu de restaurante, no currículo novo de Design responsivo para a web. Neste caso, queremos selecionar todos os elementos das duas classes, e elas não estão aninhadas.

Obrigado novamente, @gustavo.afc! :smiley:

@igoreis02, acredito que o Gustavo tenha selecionado o problema. Poderia testar e nos retornar o resultado? Bons estudos! :smiley:

3 Likes

Obrigado @danielrosa! Eu não sabia desse detalhe, percebi que em algumas situações a declaração, no arquivo “.css”, .class1 .class2 {} funcionava e em outras situações a declaração .class1, .class2 {} funcionava, mas não sabia dizer exatamente o porquê.

Então, quando eu estiver nessa situação abaixo:

/* file: index.html */
<element1 class="class1">
    <element2 class="class2">
        ...
    </element2>
</element1>
/* file: styles.css */
.class1 .class2 {
    ...
}

Posso fazer a declararão no arquivo .css do jeito acima, já que o element2 é filho do element1. E quando eu tive essa outra situação:

/* file: index.html */
<element1 class="class1">
    ...
</element1>
.
.
.
<element2 class="class2">
    ...
</element2>
/* file: styles.css */
.class1, .class2 {
    ...
}

Declaro as classes entre vírgulas no arquivo “.css”, já que não existe relação parental entre os elemento e estou selecionando todas as classes que possuem esses nomes. É isso?

1 Like

Em tese, é isso mesmo, @gustavo.afc. Com .class1 .class2, você vai estilizar todos os elementos que tenham class2 que sejam filhos de elementos com a class1 (os elementos class1, neste caso, não são estilizados - nem os elementos class2 que não sejam filhos de class1). A menos que tenha havido alguma alteração… mas isso é o que diz na descrição sobre os seletores da w3schools. Também é possível usar .class1.class2, sem o espaço entre as duas classes - neste caso, para elementos que têm as duas classes definidas, algo como <element3 class="class1 class2"></element3>. As combinações são inúmeras e esse link mostra uma boa quantidade de dicas de como fazê-las. Vale a pena consultar. Bons estudos! :smiley:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.