8
respostas

Não está funcionando o :nth-of-type(even) ...

Boa tarde, tudo bem? Eu fui trocar o uso da classe para pseudoclasse, porém não deu certo .. =( E não estou conseguindo ver o que eu fiz de errado...

<section class="Como-trabalho f-secao">
            <h2>Como trabalho</h2>

                <blockquote class="citacao fiat-citacao">
                    <p class="p-citacao">João é o melhor desenvolvedor 
                    front-end com quem já trabalhei. Muito eficiente 
                    e muito capaz. Recomendo sem dúvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>


                <p class="p-comoTrab">Satisfazer meus clientes é prioridade. Para isso, 
                garanto um processo de desenvolvimento altamente 
                interativo, baseado em feedback contínuo. 
                <strong>Não trabalho com escopo fechado:</strong> 
                o cliente é que decide quando o produto 
                está pronto.</p>

                <p class="p-comoTrab"><strong>Também não trabalho com prazos 
                fechados:</strong> qualidade é importante 
                demais para ser sacrificada.</p>

     </section>


     <section class="experiencia f-secao">    
            <h2>Experiência</h2>

                <blockquote class="citacao citacao-Petrobras">
                    <p class="p-citacao-2">João domina as 
                    tecnologias como ninguém. 
                    Eu apresentava um problema, ele tinha na 
                    ponta da língua a solução mais adequada 
                    com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>

CSS

/** FORMATAÇÃO DA SEÇÃO: COMO TRABALHO **/
.Como-trabalho {height: 15em; margin-top: 4em;}

.citacao:nth-of-type(odd) {float: left; height: 12em;
               position: relative; left: -1em; top: -7em;}


.p-comoTrab {width: 45em; position: relative;
             top: -2em; left: -2em;}

.citacao:nth-of-type(odd) cite {position: relative; left: 6em;}


/** FORMATAÇÃO DA SEÇÃO: EXPERIENCIA**/
.exp-p{width: 45em; position: relative; left: -1em; top:-1.5em;}

.experiencia h2 {position: relative; left:-5em;}


 .citacao:nth-of-type(even) {height: 13em; float: right;
                   position: relative; top: -6em; left: 1em;}
8 respostas

Oi Carolina editei seu tópico para poder visualizar seu tópico sempre que for postar código aqui no fórum, primeiro clique no botão <> INSERIR CÓDIGO e depois cole no espaço indicado. Mas não consegui entender muito bem com o código que você postou, Será que não faltou inserir o cite no seletor

.citacao:nth-of-type(even)  cite {
height: 13em; 
float: right;
position: relative; 
top: -6em;
 left: 1em;
}

Se não funcionar tenta criar um Codepen com o código completo e o que não está funcionando.

Espero ter ajudado e bons estudos.

insira seu código aqui 
 <section class="Como-trabalho f-secao">
            <h2>Como trabalho</h2>

                <blockquote class="citacao fiat-citacao">
                    <p class="p-citacao">João é o melhor desenvolvedor 
                    front-end com quem já trabalhei. Muito eficiente 
                    e muito capaz. Recomendo sem dúvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>


                <p class="p-comoTrab">Satisfazer meus clientes é prioridade. Para isso, 
                garanto um processo de desenvolvimento altamente 
                interativo, baseado em feedback contínuo. 
                <strong>Não trabalho com escopo fechado:</strong> 
                o cliente é que decide quando o produto 
                está pronto.</p>

                <p class="p-comoTrab"><strong>Também não trabalho com prazos 
                fechados:</strong> qualidade é importante 
                demais para ser sacrificada.</p>

     </section>


     <section class="experiencia f-secao">    
            <h2>Experiência</h2>

                <blockquote class="citacao citacao-Petrobras">
                    <p class="p-citacao-2">João domina as 
                    tecnologias como ninguém. 
                    Eu apresentava um problema, ele tinha na 
                    ponta da língua a solução mais adequada 
                    com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>
insira seu código aqui
/** FORMATAÇÃO DA SEÇÃO: COMO TRABALHO **/
.Como-trabalho {height: 15em; margin-top: 4em;}

.Como-trabalho > h2 {position: relative; top: -1em;}

.p-comoTrab {width: 30em; position: relative;
             top: -17em; left: 1em;}


blockquote:nth-of-type(even) {height: 12em;
               position: relative; left: 27em; top: -6em;}


blockquote:nth-of-type(even) cite {position: relative; left: 6em;}


/** FORMATAÇÃO DA SEÇÃO: EXPERIENCIA**/
.exp-p{width: 30em; position: relative; left: 14em; top:-15em;}

.experiencia h2 {position: relative; left:-1em;}

.experiencia {height: 20em;}


blockquote:nth-of-type(odd) {height: 13em; position: relative; left: -1em; top:-2em;}

blockquote:nth-of-type(odd) cite {position: relative; left: 3em; top: 1.5em;}

Tentei enviar de novo o código, quando eu mudo de classe para pseudoclasse o segundo blockquote, os dois estão indo para direita ...

Oi Carolina consegue subir seu projeto no Github ou Google Drive e compartilhar seu repositório, eu teria que ver as regras dos outros arquivos css.

Boa tarde, Maison. Eu fiz a minha conta aqui e subi o projeto para o respositório no github.. só que a primeira vez que faço isso... não sei se para compartilhar é só fornecer o nome ... eu botei: Carolbrandes / perfil-joao-da-silva.

Oi Carolina eu consegui achar seu projeto sim, bom primeiramente parabéns por ter ido além do escopo do curso e ter feito implementações próprias no css da página, isso vai agregar bastante no seu aprendizado.

"Segundamente" gostaria de salientar que existe um erro grave na estrutura você trocou a tag head que deve conter os links e as metainformações pela tag main que tem um proposito bem diferente estrutural e semânticamente.

Além disso a pseudoclasse se aplica a um grupo de irmãos, já na forma que o blockquote que está na sua página não tem irmãos dentro de uma section então todos serão iguais.

Ou você muda a estrutura para tornar os blockquotes um grupo de irmãos ou você utiliza outro seletor para aplicar as regras para cada um especificamente.

Espero ter ajudado e bons estudos.

Putz, vou corrigir aqui a tag head, é que depois que iniciei o curso de lógica, eu vi que não era legal colocar em maiúsculo o nome das tags... ai fui colocar para minúsculo e acabou que teve esse erro. Vou reestruturar novamente e aplicar a pseudoclasse. Muito obrigada pela atenção =)