Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Seletores avançados

Estou trabalhando em um projeto e cheguei em uma estrutura que gostaria de saber se tem como selecionar apenas o ultimo h3 sem adicionar algo no h3 que eu queira, só utilizando algum seletor avançado.

A ESTRUTURA:

 <div >
                    <h3></h3>  // 1° h3
                    <div>
                        <h4></h4>
                        <strong></strong>
                    </div>
                    <div>
                        <h4></h4>
                        <strong></strong>
                    </div>
                    <h3></h3> // 2° h3
                    <div><a></a></div>
                    <div><a></a></div>
                    <div ><a></a></div>
                    <h3></h3> // 3° h3 ULTIMO H3
                    <iframe ></iframe>
                    <address>
                        <a></a>
                    </address>
                </div> <!-- end
4 respostas

Eu não sei do que se trata esse seletor avançado que você procura, mas uma forma eficiente de selecionar uma tag em HTML é utilizando classes ou Id's exemplo:

<h3 class= "seletor">  CONTEUDO</h3> // 3° h3 ULTIMO H3
// Ou 
<h3 id= "seletor"> CONTEÚDO</h3>

Se for para selecionar classe utilizaria " .seletor " e para a id " #seletor "

chamando em css

.seletor  { background-color: green; }  // background de exemplo

no HTML

<style type ="text/css"> .seletor {...}  </style>

em JS

document.getElementById("seletor").style.color = "green"; //  no java não usa o " . " 

document.classList.add ("seletor") // não altera o h3 apenas chama ele para o js

Essas são as formas que eu conheço espero ter ajudado. :)

Opa, obrigado pela resposta, porém eu queria saber com seletores avançados,

sem adicionar algo no h3 que eu queira

exemplo:

<div></div>
<p></p>

se eu fizer isto:

div + p { color: red; }

meu p ficara com as letras vermelhas, eu n precisei adicionar algo a tag ( como classes id atributos enfim.)

Queria saber se existe alguma forma de selecionar aquele ultimo h3, sem adicionar nada a tag, somente usando seletores no css.

solução!

Oi Nicolas, tudo certo?

Voce tentou como quando estava tentando esse desafio?

Voce pode usar o nth-of-type para te ajudar, ou usar a estrutura do HTML como apoio. Repare que esse H3 que voce quer selecionar vem logo depois de tres DIVs.

Esse é o caminho.

Espero ter ajudado,

Abcs!

Puts, é tanto seletor que eu acabo me confundindo, acredita que eu já usei nth-of-type no projeto? E pior, quando surgiu essa minha duvida eu tentei colocar esses pseudos aqui.

h3:nth-of-type(n):last-child{} KKKKKK ai mds..

Vou deixar os possíveis resultados aqui pra galera que consultar depois.

sem ser utilizando ID e Classes.

div+div+div+h3 {}

div ~ div ~ div ~ h3 {}

div ~ div ~ div + h3 {}

h3:nth-of-type(3) {}

Obrigado Instrutor Natan de Souza Fonseca. Sempre me ajudando ^^.

E recomendo ao Thiago Guimarães da Silva Estudar sobre os seletores e pseudos, são bem úteis.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software