<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Selecionar Elementos #02</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body class="conteudo exercicio">
<div id="primeiro">#primeiro</div>
<div wb-attrib>Segundo</div>
<div class="ultimo terceiro"><span wb-attrib>.terceiro .ultimo</span></div>
<script>
document.querySelector('#primeiro').classList.add('destaque')//esperar selecionar um seletor
//selecionar vários
const selecionar = seletor =>
document.querySelectorAll(seletor).forEach(e => e.classList.add('destaque'))//retorna uma classe de lista
//função para deselecinar
const descelecionar = seletor =>
document.querySelectorAll(seletor).forEach(e => e.classList.remove('destaque'))
selecionar('div')//selecionar tudo que tem div
descelecionar('*')//deseleciona tudo o que foi selecionado
selecionar('.terceiro.ultimo')//seleciona esse elemento
descelecionar('*')
selecionar(':not(#primeiro)')//tudo que não e primeiro será selecionado
descelecionar('*')
selecionar(':nth-child(1)')//seleciona o primeiro filho de algum elemento
descelecionar('*')
selecionar('div:nth-of-type(1)')//seleciona o primeiro elemento do tipo div
</script>
</body>
</html>
