Seletores avançados do CSS

1. Olá!: Oi, todo mundo. Muito obrigado por clicar nesta aula. Meu nome é Verity, e sou um desenvolvedor front-end de Sydney, Austrália. Agora, nesta classe, vamos dar um mergulho profundo nos seletores CSS, e como você pode usá-los para aumentar o nível seu jogo de estilo quando você está trabalhando em seus projetos web. Nosso projeto para esta aula vai estar trabalhando com um menu de estilo acordeão que eu já preparei para você, e você pode baixar esses arquivos de curso na seção “Seu projeto” em arquivos anexados abaixo deste vídeo. Vamos estar olhando para esse acordeão e vendo como poderíamos usar esses seletores avançados para estilizar elementos de maneiras diferentes e maneiras mais específicas que vão apenas tornar seus projetos da Web muito melhores. Agora, este curso assume que você já trabalhou com CSS e HTML antes, mas se você nunca tocou em nenhum desses, não se preocupe, você pode voltar e dar uma olhada na minha classe anterior, que é chamada Como construir um site, e isso lhe dará algumas habilidades fundamentais em HTML e CSS. Então, você pode fazer esta aula que vai apenas construir sobre as habilidades que você vai aprender nessa classe. Agora, se você ficar preso em algum momento, certifique-se de que você comenta abaixo, e eu vou tentar e ajudá-lo. Esperemos que seus colegas tentem ajudá-lo e, claro, certifique-se de mostrar seu trabalho na seção de projetos. Eu adoraria ver como você personaliza o acordeão e os efeitos que você pode criar. Basta experimentar com cada um dos diferentes tipos de seletores, porque a melhor maneira de aprender é, claro, fazendo. Ok. Se você estiver pronto para começar, faça o download dos arquivos do curso e vamos. 2. SELETORES BÁSICOS: Se você já trabalhou com CSS antes, você provavelmente se deparou com os três tipos básicos de seletor, mas apenas para o caso, vamos fazer uma breve recapitulação agora para garantir que todos estejam na mesma página. Então, nossos seletores básicos que você usaria todos os dias no CSS são seus seletores de elemento, classe e ID. Agora só para lhes dar um lembrete rápido do que cada uma dessas coisas são. Um seletor de elemento é a maneira como você direciona qualquer elemento na página de um nome especificado. Então, dentro do seu html, você pode ter uma tag P, uma tag de imagem, uma tag div ou um span. Apenas como um exemplo, pode ser qualquer coisa e a maneira que você iria segmentar que em seu CSS é simplesmente escrevendo o nome do elemento em CSS seguido por seus colchetes e, em seguida, seus estilos dentro do colchetes. Agora, uma classe aplica estilos a todos os elementos em uma página que você deu o nome de classe especificado. Uma classe é escrita com uma parada completa na frente dele e você pode nomeá-lo o que quiser, desde que você dê o atributo classe para o elemento que você deseja que ele seja aplicado e colocar o nome entre as vírgulas. Agora, classe difere de um seletor de elemento em que um seletor de elemento iria selecionar cada parágrafo único na página, enquanto um seletor de classe só vai segmentar os elementos que você deu a classe para. Então, digamos que você tenha uma série de tags de parágrafo em sua página. Se você tiver aplicado apenas a classe a um desses parágrafos, os estilos só serão aplicados a esse parágrafo específico. Finalmente, nosso seletor de ID que é o mais específico entre os três. É escrito em CSS usando um hash antes do nome do ID. Ele funciona de forma muito semelhante a uma classe, mas é importante lembrar que um ID significa identificação, você só pode usar um ID uma vez em uma página. Se você usá-lo mais de uma vez, vai causar todos os tipos de erros e problemas para você. 3. HERANÇA E ESPECIFICIDADE: Ei! Você provavelmente já ouviu isso antes, mas o acrônimo de CSS significa folhas de estilo em cascata, e ele essencialmente funciona em um método de tipo cachoeira onde quanto mais abaixo a página os estilos são, mais importância eles são dados no navegador. Então, qualquer coisa que você tenha escrito no topo, se houver um seletor que tem como alvo a mesma coisa no fundo, esse estilo vai se acostumar. Agora, isso pode funcionar de uma forma linear de cima para baixo, mas também em termos de especificidade. Quanto mais aninhada uma classe é, mais específica ela é e, portanto, mais importante. Agora, em nosso acordeão, vemos isso demonstrado todo o caminho através de nossas folhas de estilo, mas vamos entrar em nosso html apenas para dar uma olhada rápida em um exemplo. O primeiro exemplo é este título de lição, esta pequena seção aqui que temos dizendo em que lição estamos. Nesta seção do título da lição, eu dei a ela uma classe e um ID do título. Se entrarmos em nosso CSS, podemos ver que eu apliquei text-align: centro para a classe lesson-title. Agora, para mostrar como a herança funciona com seletores que são de igual nível de importância, vou criar uma segunda instância do título da lição. Esta é a mesma classe sendo aplicada à mesma div. Eles são do mesmo nível de importância, mas nossa segunda instância do título da lição é mais abaixo da folha de estilo, que significa que ele irá substituir nossa primeira instância. Se salvarmos isso e voltarmos para nossa página, podemos ver que no momento é text-align; center, que é a classe original, mas se eu atualizar a página, você pode ver que essa segunda instância substitui e aplica texto align: left. Agora, classes são provavelmente o seletor mais comum que você vai usar em CSS, mas você provavelmente também viu o uso de ids aqui e ali. Agora, como o nome sugere, um ID é um identificador exclusivo altamente específico que você pode aplicar ao seu HTML para diferenciá-lo de outros elementos na página. Mas, você precisa ter em mente, como eu disse antes, que você só pode usar um ID uma vez em uma página, e que qualquer estilo que você aplicar dentro do ID irá substituir qualquer classe ou elemento seletores de nível porque ele é dado um nível mais elevado de importância no CSS. Então, vamos voltar para o nosso CSS e eu vou demonstrar o que eu quero dizer. Vamos nos livrar de nossa segunda instância da aula de título de lição. Não precisamos disso no momento. Você pode ver aqui em cima, se eu comentar novamente, Eu selecionei o ID do título usando hash e, em seguida, o nome do ID, que é título neste caso, e eu apliquei text-align direito a ele. Agora, se ID e classes têm o mesmo nível de importância, seguiria a herança de estilo em cascata que classes normais fazem. Se esse fosse o caso, então, o text-align deve ser centralizado porque está mais abaixo na página. Mas, como nos IDs CSS recebem um nível mais alto de importância, podemos ver em nossa página que se eu atualizá-lo, ele realmente vai para a direita, mesmo que tenhamos escrito esse estilo mais alto na página porque é um ID e ele tem um nível mais alto de importância no CSS, ele substitui tudo o que está abaixo dele aplicando a essa div específica. Ao trabalhar em projetos maiores, eu geralmente evito usar IDs tanto quanto eu posso no meu CSS porque ele cria um nível extra de complexidade com herança sólida e especificidade. Muitas vezes, jovens desenvolvedores ou desenvolvedores que estão começando, tentarão usar algo como um ID que tem um nível de valor mais alto para tentar substituir problemas que eles estão tendo em seu código. Eu encorajo-te a não fazeres isto. Você só vai criar mais dor de cabeça para si mesmo quando essa questão voltar e você vai ter que encontrar outra maneira de substituí-la. É sempre melhor resolver o problema a partir de seu núcleo do que usar táticas de força bruta, como IDs. 4. ESTILOS ANINHADOS X ESTILOS GLOBAIS: Uma das perguntas que me fizeram no meu último curso foi a diferença entre um estilo global versus um estilo aninhado em termos de especificidade. Então, vamos dar uma olhada rápida nisso agora. Você pode ver aqui acordeão no navegador, é apenas uma série de desenhos, com diferentes tipos de conteúdo em toda parte. Então, se eu entrar no meu arquivo de índice, você pode ver que eu tenho a classe de embrulho de acordeão que vai todo o caminho em torno dele. Então temos um contêiner para cada um dos nossos sorteios com o sorteio da classe, e dentro temos rótulos e descrições. Agora, em nosso CSS, você pode ver que eu escrevi o desenho da classe, e dado a ele o estilo de borda do ponteiro do cursor inferior dois pixels branco sólido. Agora, porque não há nada que preceda esta classe, é uma classe global. O que isso significa, é que não importa quantas vezes eu use esta classe na página, e não importa o que eu usá-lo em, mesmo que não seja suposto ser um empate, esses estilos serão aplicados. Então, se por exemplo, se eu fosse escrever, transformar, girar 5 graus, e eu vou salvar isso e vamos dar uma olhada. Você pode ver que cada um dos sorteios rodou em 5 graus. Sei que parece um pouco estúpido, mas é só um exemplo. Então agora, obviamente, cada um dos nossos Dibz tem o sorteio da turma, então faz sentido fazer isso. Mas e se aqui em cima no nosso título fôssemos escrever o sorteio da turma? Não está dentro do nosso acordeão, mas se o atualizarmos, o mesmo estilo é aplicado. Agora classes globais podem ser muito úteis, porque digamos, por exemplo, você tem uma classe contendo que você deseja usar mais e mais, ou um estilo base. Digamos que você quer que todos os seus links tenham uma cor vermelha. Isso pode ser muito útil. Mas também pode ser muito frustrante em, digamos, quando você está construindo um site de várias páginas, e você acidentalmente reutilizar uma classe, isso soa como um nome de classe muito geral, mas você não quis. Então diga algo como um rótulo, digamos que temos o rótulo da classe aqui. Neste caso, estamos usando o rótulo como esta seção verde em um desenho, mas, você pode usar um rótulo no contexto de digamos, um formulário, uma imagem ou um questionário. Então, você poderia ter um site de 100 páginas e usar rótulos em todos os tipos diferentes de lugares. Mas você pode não querer necessariamente que todos tenham um fundo verde e um texto branco. Então é quando o nidificação se torna muito útil. Então, em nosso índice, você pode ver que nosso rótulo está contido por uma div pai que tem o custo de sorteio. Então, temos a classe global de sorteio, um espaço, e, em seguida, o rótulo do teste e aplicamos nossos estilos. Então, agora, se eu fosse para entrar em nosso HTML, e eu vou me livrar do empate, e vamos escrever rótulo, e atualizar, e nada acontece. Este é um rótulo para o site tecnicamente, mas não é dado o fundo verde, porque ele foi aninhado. Então, a menos que você tenha esse contêiner de desenho fora do rótulo, esses estilos não serão aplicados. Agora uma coisa boa a lembrar, se você tem aulas, digamos como com nosso rótulo e descrição, temos estilos diferentes aplicados a cada uma dessas classes, mas pode haver coisas que você quer que elas compartilhem. Uma coisa que você pode fazer se você quiser manter suas classes separadas, mas aplicar certos estilos que são os mesmos, você pode realmente encadear classes separando-as com uma vírgula. Então, eu tenho o desenho e o rótulo, e então desenhar e descrição, e eu quero dar a ambos uma borda de um pixel vermelho sólido, nós os acorrentamos juntos. Então agora tanto o rótulo quanto a descrição foram dadas uma borda. Saber quando usar um estilo global versus um estilo aninhado é algo que se resume a você como desenvolvedor e você avalia seu caso de uso específico. Um estilo global é ótimo para coisas que você gostaria de reutilizar repetidamente em seu site, mas um estilo aninhado que eu realmente recomendaria para a maioria de seus estilos para colocá-los nos cenários aninhados que eles não está vazando em lugares que você não quer que eles, mas também para ter em mente que se você descer muitos níveis em um estilo aninhado, ele pode se tornar muito específico, e muito frágil, então você não vai ser capaz de reutilizá-lo em qualquer lugar do seu site. Uma boa regra geral é três níveis de nidificação máxima, que você mantenha essa flexibilidade de ser capaz de estilo uma e outra vez, mas não tão flexível que eles podem ser usados em qualquer lugar do lado. 5. SELETORES UNIVERSAIS: Um seletor universal é um conceito bastante direto e literalmente significa que você pode aplicar estilos a tudo na página, então o estilo é universal. Agora, em CSS, se entrarmos em CSS, você pode ver que o seletor universal é aplicado em CSS usando um asterix apenas por conta própria, e você pode ver que em nosso código e exemplo, eu usei o seletor universal para aplicar uma família de fontes de san-serif se eu comentar isso e salvá-lo. Vamos dar uma olhada. Você pode ver que ele está voltando para sua forma inicial. Então, ao aplicar este estilo de família de fontes san-serif, isso afetou tudo na página. Em todos os lugares que há uma fonte, ela mudou a fonte. Eu também usei para definir o tamanho da caixa para border-box, que eu recomendaria que você faça com cada um dos seus sites que você construiu. Eu não vou entrar no que o tamanho da caixa realmente faz nesta aula. Eu abordei isso na minha classe original Como construir um site, então você pode ir lá se quiser saber mais sobre o que essa propriedade realmente faz. 6. COMBINADORES: O próximo passo que vamos cobrir são combinadores. Agora, você tem realmente usado combinadores talvez sem perceber se você já escreveu qualquer tipo de CSS antes. Um combinador é basicamente uma maneira que você pode segmentar elementos em uma página dependendo do que precede e segue. Então, eles são quatro tipos principais de combinadores que vamos dar uma olhada, e estes são: descendente, filho, irmão adjacente, e irmão geral. Agora, um combinador descendente, você provavelmente já usou antes, talvez você só não soubesse como se chamava. É provavelmente o combinador mais comum, que é simplesmente adicionar um espaço entre duas classes, para que você possa direcionar todos os elementos de correspondência que são descendentes de uma determinada classe. Se entrarmos no CSS do nosso acordeão, você pode ver isso por todo o lado. Então, vou desenhar para direcionar os rótulos, queremos direcionar a descrição, a imagem. Isto é basicamente dizer, dentro do sorteio qualquer coisa que tem o rótulo da classe deve ter esses estilos e que é um combinador descendente. O próximo é um pouco mais específico, e isso é um combinador infantil. Então, como podem ver aqui à esquerda, temos uma classe de pais e o parágrafo filho. Agora, você pode estar pensando para si mesmo como isso é diferente para um descendente. Bem, se voltarmos ao nosso CSS, e darmos uma olhada. Vamos dar uma olhada no nosso índice, na verdade. Se formos para o nosso primeiro sorteio, você verá que dentro da nossa descrição temos dois parágrafos e, em seguida, temos um sub-contêiner descrição com mais um parágrafo dentro dele. Se entrarmos no navegador, podemos ver que só sai olhando como três parágrafos. Agora, se entrarmos em nosso CSS e direcionarmos esses parágrafos. Então, digamos, desenhe, descrição e, em seguida, parágrafo. Então, estamos apenas usando seletores descendentes para o minuto, e dizemos que queremos que eles tenham a cor vermelha, simples salvar isso, vamos atualizar nossa página, e todos os parágrafos dentro do desenho em todos os níveis são vermelhos. Agora, isso é um combinador descendente. Um combinador filho, vamos copiar isso, selecioná-lo para baixo. Vamos substituir este combinador descendente por um combinador de crianças. Então, estamos usando uma pequena seta para dizer uma criança, e queremos que todas as crianças, as crianças diretas tenham a cor de roxo. Agora, se voltarmos para nossa página e atualizarmos, você pode ver que os dois primeiros são roxos, mas o terceiro ainda está vermelho. Então, vamos entrar em nossas DevTools, e vamos dar uma olhada no porquê. Então, se olharmos para o nosso HTML você pode ver, enquanto este parágrafo inferior é um descendente de descrição, não é uma criança imediata, é mais como um neto porque está abaixo em um terceiro nível. Nosso próximo combinador é um irmão adjacente. Então, que tem como alvo o próximo irmão após o seletor inicial. Você pode vê-lo aqui. Temos o sinal inicial de adição de seleção e, em seguida, o irmão que imediatamente o segue. Então, vamos voltar para o nosso CSS. No nosso terceiro sorteio, se descermos aqui você pode ver que o sorteio três tem um parágrafo e, em seguida, duas imagens. Para demonstrar o que um seletor adjacente faria, se usássemos nosso desenho, descrição, parágrafo e, em seguida, o irmão adjacente da imagem, e colocaremos uma borda de 10 pixels de preto sólido em torno dele. Então, o que isso significa, é qualquer tag de parágrafo que é um descendente da descrição. Queremos atingir o irmão imediato se for uma imagem. Então, vamos salvar isso, entrar em nosso navegador. Você pode ver que ela só tem como alvo esta primeira imagem, mas é deixada como a segunda só. Porque se você se lembra em nosso HTML, nós temos um parágrafo, imagem, imagem. Então, este aqui é o irmão adjacente, é o próximo irmão depois da tag de parágrafo. Se quiséssemos atingir os dois, usaríamos o irmão geral, que é esta pequena onda aqui e que terá como alvo todos os irmãos nesse nível. Então, vamos tentar isso, vamos substituir a vantagem com a nossa pequena onda, e salvar. Atualize, abra nosso sorteio, e você pode ver que ele tem como alvo os dois. 7. SELETOR DE ATRIBUTO: Um seletor de atributos é uma maneira muito útil para você segmentar elementos em uma página com base em quais atributos você declarou em seu HTML. Então, se formos dar uma olhada no nosso arquivo de índice, você pode ver que já temos todos os tipos diferentes de atributos. Um ID é um atributo, uma classe é um atributo. Em nossas imagens, a fonte é um atributo. Você pode ver aqui nos sorteios, Eu realmente incluí um atributo de tipo de dados. Esta é uma maneira que você pode criar seus próprios atributos personalizados desde que você prefacie com dados, e depois um pequeno hífen, você pode nomeá-lo como quiser. Então, talvez você queira chamá-lo de nome de dados ou dados ativos ou o que você gosta. Mas vamos ficar com o tipo de dados por enquanto. A maneira que você teria como alvo isso em CSS, Eu apenas copiei em algumas informações aqui para o arquivo que estará em seus arquivos de projeto finalizados. É apenas um trecho da página W3Schools sobre seletores CSS porque eles são um pouco difíceis de lembrar do topo da sua cabeça. Mas, essencialmente, a maneira como você direcionaria um atributo em seu CSS é digamos, por exemplo, queríamos atingir resultados com esse atributo de tipo de dados. Você poderia chamar o sorteio da classe. Então, sem espaços porque você deseja segmentar o mesmo elemento em que o desenho está, você escreveria o nome do atributo. Então, neste caso, eu quero segmentar cada sorteio que tem o tipo de dados de atributo, não importa qual seja o valor do tipo de dados. Então, vamos dar a isso uma borda de um pixel vermelho sólido, e vamos salvar isso e dar uma olhada. Você pode ver que ele é direcionado a cada sorteio, porque temos esse atributo de tipo de dados em cada sorteio. Agora, digamos que você só quer segmentar algo de um valor específico. Então, você tem seu atributo de tipo de dados, mas você só deseja segmentar aqueles que são do tipo de dados T01, por exemplo. Então, se salvarmos isso e atualizarmos, agora está direcionando apenas aqueles com T01. Agora isso pode ser muito útil. Você pode usá-lo de muitas maneiras diferentes. Tenho certeza de que você encontrará maneiras de criar seus sites para usar isso. Não se esqueça, também você pode usá-lo em combinação com outros tipos de seletores. Assim, por exemplo, com um seletor descendente. Digamos que queremos direcionar apenas aqueles sorteios que têm o tipo de dados T01, e queremos direcionar os rótulos dentro desses sorteios e dar-lhes um tipo de fundo de mostarda colorido. Podemos fazer isso também. Agora, como você vê, nós temos uma pequena lista bastante útil aqui. Outro exemplo é usar esta pequena onda, você pode segmentar parte do que compõe o valor do atributo. Então, aqui eles têm o exemplo do título, inclui a palavra flor. Agora, podemos usar isso no nosso acordeão para mirar nas imagens deles. Então, se dissermos desenhar imagem e dizemos que a fonte deve incluir a palavra bicicleta, por exemplo, queremos girar qualquer imagem de motos em cinco graus. Então, vamos salvar isso e atualizar e abrir nosso sorteio. Opa, e isso não funcionou. A razão é que eu escrevi fonte em vez de alt que é onde você iria escrever a descrição do que a imagem é. Então, se entrarmos em nosso HTML, você pode ver alt bike, alt donuts, e nós só queremos atingir o que tem a palavra bike nele. Então, mesmo que adicionássemos outras palavras, bicicleta azul, e guardasse isso, ela ainda teria como alvo a moto porque o valor da etiqueta alternativa inclui a palavra bicicleta. Outro valor de atributo útil é este aqui onde você pode direcionar qualquer atributo que você gosta e usar o $ para pesquisar o valor e encontrar quaisquer atributos que tenham o valor terminando em um determinado conjunto de palavras ou letras. Então, por exemplo, poderíamos procurar por imagem de desenho novamente. Vamos procurar a fonte desta vez. Vamos procurar qualquer imagem que tenha o fim de jpg dentro da fonte. Vamos aplicar transformação, digamos, escala 1.2. Então, isso vai aumentar a escala em 20 por cento. Nós economizamos e atualizamos. Você pode ver que aumentou de tamanho. Agora, há uma lista completa de diferentes seletores de atributos que você pode usar, e eu realmente encorajaria você a brincar com eles, apenas experimentar e com os diferentes tipos de efeitos que você pode alcançar com esses atributos seletores. 8. PSEUDOELEMENTOS: Agora, classe Pseudo é uma maneira que você pode segmentar diferentes estados em seu HTML e CSS. Então, digamos que você tem algo como um link, você usaria uma classe para um seletor de elemento ou o que quer que você queira para estilizar o link em seu estado padrão, como iria vê-lo dizer quando você carrega a página. Mas quando você quer que ele diga passe o mouse sobre esse link, você pode querer que os estilos sejam um pouco diferentes. Você pode querer que ele mude de cor, seja destacado ou sublinhado. Então, você usaria uma pseudo-classe para direcionar o estado de foco desse elemento. Se entrarmos em nosso CSS, eu colei em apenas alguns exemplos de pseudo-classes que você pode usar, incluindo nosso hover, nosso visitado e o antes e depois. Vamos apenas dar uma olhada rápida em como você realmente usaria isso. Então, sabemos que em nosso acordeão temos nossas gavetas com nossa etiqueta na descrição. Então, por que não usamos o estado de pairar para direcionar nossa etiqueta? Então, vamos escrever desenhar, rotular e podemos usar o mouse fazendo um pouco de dois-pontos, e depois escrever o nome da pseudo-classe, colchetes, e queremos que nossos fundos para mudar para ser esta cor mostarda quando mantemos sobre ele com o nosso rato. Se eu salvar isso, e nós atualizarmos, e você pode ver que o efeito está funcionando agora. Outra pseudo-classe que eu uso bastante regularmente, que eu queria mencionar, seria antes e depois de pseudo-classes. Agora, isso permite que você altere o estado de/ou adicione coisas em em ambos os lados no antes ou depois do seu elemento. Então, digamos que com o título da lição, um pouco h1 um aqui, o que você pode realmente fazer é se eu atingir o título da lição e, em seguida, a escotilha, eu posso usar a pseudo-classe antes para realmente adicionar conteúdo antes do h1. Então, se digamos, por exemplo, eu queria adicionar duas barras em um espaçamento, e eu quero que tenha a cor rosa, e eu quero que ele tenha o tamanho da fonte de 35 pixels. Vamos dizer isso e dar uma olhada no que acontece. Você pode ver lá está, parece. Então, nós escrevemos uma extensão do nosso HTML dentro do CSS. Agora, eu não recomendaria realmente escrever HTML em seu CSS, mas dizer, você está tentando criar campos de formulário personalizados ou botões de entrada ou algo assim, pode ser realmente útil para ser capaz de adicionar neste pouco extra de algo antes ou depois de um elemento que você pode estilizar e personalizar. Você verá muitos exemplos disso à medida que começar a criar mais recursos criativos do seu site. 9. E AGORA?: Lá vai você. Você deu uma olhada em alguns dos tipos selecionados mais avançados disponíveis no CSS. Espero que você tenha aprendido algumas habilidades novas e feito algumas experiências com sua codificação para ver que tipo de estilos você inventa. Eu adoraria ver o trabalho que você fez na seção de projetos abaixo. Então, certifique-se de fazer upload de capturas de tela, trechos de código, o que você quiser, eu adoraria vê-lo. Se você quiser ver mais aulas para mim no futuro, certifique-se de me acompanhar no Skillshare e mídias sociais e eu avisarei quando eu atualizar novas aulas. Se você tem algo que você realmente gostaria de aprender sobre, certifique-se de que você comentar abaixo ou tweet para mim ou o que você quiser. Diga-me sobre o que você gostaria de aprender e eu posso absolutamente tentar e fazer um curso sobre isso para você. Se você está se sentindo extra doce, você pode deixar um comentário sobre este curso, que realmente me ajudaria. Espero que tenha gostado da aula e te vejo na próxima vez.