Oi, hoje vamos falar sobre seletores avançados.
Até este ponto, quando escrevemos nossas regras,
temos escrito nossas regras para um tipo específico de tag.
Temos dito h1 ou p ou h2.
Então, nós realmente apenas focamos em uma coisa que cobre todos os diferentes elementos
desse tipo.
Mas e se você não quiser estilizar todos os links, apenas alguns deles?
Ou você não quer estilizar todas as suas listas,
você só quer estilizar algumas delas?
Bem, agora vamos falar sobre esse tipo de seletores avançados
que nos deixarão fazer exatamente isso.
CSS vai te dar tantas opções que nesta palestra eu vou tentar
cobrir o máximo que eu puder, mas ainda vai ser até você sair e
procurar um pouco mais por conta própria como você precisa delas.
Então vamos começar com os seletores CSS que seguem o DOM.
Se você se lembrar, o modelo de objeto de documento
é como o navegador divide sua página em uma estrutura semelhante a árvore.
Então, desta forma, o navegador realmente sabe se um parágrafo vem diretamente após uma
tag h1 ou se dois parágrafos são irmãos na mesma seção.
Vamos utilizar isso para estilizar apenas algumas partes da sua página.
Então os seletores descendentes são uma maneira de dizer, hey, se você está dentro de uma tag de navegação,
eu quero que você estilize todos os links que estão dentro da tag de navegação.
Em vez de fazer todos eles, só aqueles.
Se você quiser ser ainda mais específico, você pode usar os seletores filho.
Esta regra é muito semelhante, exceto que diz,
todos os links a precisam ser o que chamamos de descendentes diretos do link nav.
Se você tem um parágrafo lá e você tem alguns links lá dentro, ignore isso.
Eles precisam estar diretamente debaixo um do outro.
O último é irmão adjacente.
Isso não é um que eu realmente uso muito em minha própria codificação, mas
eu queria que você soubesse o que é porque há uma boa chance de
você ver se você está olhando para o código de outras pessoas.
Como funciona o irmão adjacente é que os elementos devem ser
o que chamamos de mesmo nível e seguir uns aos outros.
Então, se você tem uma seção que tem um h1 e,
em seguida, uma lista ordenada, eles seriam irmãos.
Se você tivesse um h1 e, em seguida, algumas outras coisas e
essa lista ordenada estivesse dentro de um parágrafo, não funcionaria dessa maneira.
Em seguida, vamos falar sobre o que chamamos de seletores de id.
são usados para identificar um único elemento no DOM.
A forma como id trabalho é que você iria em, e
você iria, em seu HTML, dizer algo ao longo das linhas de id igual cabeçalho, ou
id igual rodapé é um que eles usaram muito.
Em seguida, na sua folha de estilos, usando o símbolo de libra,
você pode identificar quais deseja estilizar.
Então agora, há um pequeno movimento,
mas está crescendo um pouco, para sair do uso de id do CSS.
Eles estão dizendo que não há realmente nenhum ponto em usar isso porque
muitas pessoas realmente usam esse ID para JavaScript e coisas assim.
Mas novamente, isso é algo que você vai ver muito, então
eu quero apresentá-lo a ele.
Então vamos ver um exemplo muito rapidamente aqui apenas na tela de como ele funciona.
No meu HTML, eu iria em frente e colocar em minha fonte, minha tag alt,
mas também ID="MainLogo”.
Então, na minha folha de estilo, usando o símbolo # junto com o nome do ID,
o navegador vai saber, oh, sempre que eu ver uma dessas imagens,
eu quero ter certeza de adicionar esta borda e esta margem.
Os seletores de classe são semelhantes aos ids, mas a diferença é que as classes podem
aplicar a um intervalo de elementos, não apenas um elemento específico no DOM.
Então, pense em imagens em miniatura ou nas mídias de ícones sociais.
É essa ideia que, quer saber,
eu quero ser capaz de estilizar um grande grupo de coisas da mesma maneira,
mas eu não quero necessariamente estilizar todas elas dessa maneira.
Você não quer que todas as suas imagens sejam miniaturas,
mas você quer que muitas delas sejam.
Você escreveria este código de uma maneira muito semelhante.
Aqui no meu HTML, eu tenho class="thumb”, class="thumb”,
class="thumb”.
E no meu CSS, em vez de usar o #, você precisa ter certeza de usar o
ponto ou ponto, juntamente com o nome da classe, e então você pode dar qualquer regra a ele.
E desta forma, a página vai passar e saber que, além de
qualquer estilo que você acabou de colocar em imagens, você também quer este estilo para as miniaturas.
Então, só para tentar ajudá-lo a deixar isso um pouco mais claro,
qual é a diferença entre usar classes e IDs?
Bem, primeiro, você quer ter certeza de que sabe a sintaxe.
O período é para as aulas, e a libra é para IDs.
Você não pode estragar isso, porque o navegador não irá corrigi-lo para
você se você colocar a coisa errada na frente do seu nome de classe ou ID.
Você quer lembrar que as aulas podem ser usadas várias vezes.
Faz sentido no seu código HTML ver class="thumb”, class="thumb”,
class="thumb”, class="thumb” porque não é suposto ser uma parte específica da página.
Com IDs, ele deve ser único, você só deve ver id igual, por
exemplo, cabeçalho, que nós nem estamos usando uma vez.
Você só deve ver id="seção principal” uma vez.
Então, novamente, vamos pensar em imagens e barras de navegação.
É muito comum que você queira formatar inúmeras, mas
nem todas as imagens da mesma maneira.
E você usaria aulas para isso.
Onde você pode usar um id é, tenho certeza de que você esteve em alguns lugares onde na
página da Web, você vê a barra de navegação e
a página em que você está atualmente tem um estilo ligeiramente diferente.
E isso faz sentido porque você só pode estar em uma página de cada vez, e
é por isso que você pode optar por usar o id.
Então vamos em frente e passar por um exemplo rápido usando essa barra de navegação.
Então aqui está um arquivo HTML de exemplo,
onde tudo o que eu fiz foi colocar em quatro links que realmente não vão a lugar nenhum.
Eu comentei a folha de estilo só para que
você possa ver o que ficaria sem qualquer estilo.
Você pode ver, eu tenho meu Lar, Interesses, Currículo, Hobbies, e
eu tenho um link adicional aqui embaixo que eu muito mal chamei aqui.
Então vamos em frente e
tentar adicionar um pouco de estilo usando esses seletores avançados.
Vá por aqui.
Você pode ver que eu usei o elemento filho de, na verdade,
apenas um tipo de descendente de, hey, todos os links que estão na barra de navegação,
eu quero estilo diferente, eu quero dar a eles uma cor de fundo
diferente, uma largura diferente, coisas assim.
Além disso, qualquer coisa que é corrente de classe, eu quero fazer ainda
diferente de qualquer outro link ou qualquer outra coisa que já vimos dessa maneira.
Então vamos em frente e descomentar a folha de estilo.
Salve isso.
Vá disto para isto.
Você pode ver que apenas os links que estão dentro da minha barra de navegação são estilizados.
Este foi deixado o mesmo.
E aquele em que eu tenho class="atual” parece diferente dos outros.
Então é muito simples usar essas coisas, você só precisa saber sobre elas.
À medida que suas páginas ficam mais avançadas,
você vai querer restringir o escopo de algumas das regras.
Só queremos aplicá-las a certas coisas.
E uma das notações que você pode usar para isso é o ponto.
Então, em sua folha de estilo, você realmente teria p.main.
Isso significa ir e encontrar todos os parágrafos que estão usando a classe principal.
Ou você pode ter cabeçalho img.special.
Isso significaria encontrar todas as imagens que têm imagem clássica especial
que pertencem ao cabeçalho.
É apenas uma maneira de você realmente reduzir o que está sendo estilizado.
Na mesma mão, você também pode, o que chamamos, expandir o escopo.
Então, digamos que há algum tipo de estilo que você deseja aplicar
ao cabeçalho e ao rodapé, ou às seções e aos artigos.
Não é um problema.
O que você faz é escrever o elemento,
e você inclui uma vírgula bem ali para deixá-lo saber.
Então, apenas como uma revisão rápida.
E isso é algo de muito mais cedo.
Você precisa pensar sobre o que acontece quando há várias regras para
o mesmo seletor.
Então você pode ter este aqui em cima com o parágrafo onde ele tem certas
qualidades que ele quer compartilhar entre os parágrafos h1, o id main, e
o especial de classe.
Mas mais tarde, se você quiser ter um estilo adicional para
um parágrafo, contanto que você coloque isso em algum lugar abaixo,
ele vai substituir e combinar com qualquer coisa que é mais alto.
Então, a menos que uma regra tenha o ponto de exclamação importante depois dela,
ela sempre usa a última que viu, junto com as anteriores que não entram em conflito.
Além dos seletores de elementos e os diferentes seletores de relacionamento DOM,
também temos alguns mais sobre os quais eu quero falar brevemente.
O primeiro é o seletor universal, que é a estrela ou
o Shift oito no teclado.
O que este faz é
aplicar o seu estilo a cada elemento da página.
É absolutamente louco.
Eu não vou fazer isso.
Eu vou deixar você fazer isso, mas vá em frente e coloque em uma estrela, e então o estilo,
talvez fronteira, em torno de cada elemento.
Isso afeta tudo na sua página.
Às vezes, é bom para depuração.
O próximo que você pode querer pensar em usar é o que chamamos de
seletores de atributos.
Em vez de ir nas tags, você vai sobre os atributos que vão dentro das tags.
Então, neste caso, ele iria em frente e iria querer estilizar cada link onde você
tem href="info.html”, e eu vou fazer um exemplo rápido disso em apenas um segundo.
Mas antes de fazer isso, queria mencionar mais dois que veremos mais tarde,
que são pseudo-classes e pseudo-elementos.
Apenas outro nível de distinguir apenas certas coisas que você quer estilo
em sua página.
Mas primeiro, vamos em frente e olhar para o uso desses seletores de atributos.
Então, a maneira que os seletores de atributo funcionam é que eles pesquisam o DOM para
elementos que têm o atributo que você está procurando.
Então, por exemplo, você pode querer olhar todas as imagens que usam arquivos gif ou
todas as imagens que têm texto alt vazio ou talvez
todos os links que vão para sites governamentais, sites sem fins lucrativos ou sites educacionais.
É muito fácil para nós encontrá-los e seguir em frente e
estilizá-los um pouco diferente.
Como fazemos isso é usar operadores para
combinar as diferentes partes do texto alt que você está procurando.
Então aqui em cima, no que chamamos de “acento”, vai coincidir com o início.
Então, neste caso, ele corresponderia a todos os links que começam com http://umich, e
não importa como ele termina.
O próximo com o cifrão vai coincidir exatamente com o fim.
Ele vai encontrar todos os arquivos que terminam em .png.
Nós também temos o curinga, para onde você está indo e
dizendo que se você vir umich em qualquer parte de qualquer referência hiper em tudo, aplicar esta regra.
Então o que vamos olhar é olhar para um arquivo que tem
links diferentes e cada um tem um tipo diferente de extensão que queremos estilizar de forma diferente.
Tudo bem.
Então o que eu tenho aqui é apenas uma lista de links.
Não há aulas.
Nada de especial sobre estes, que vai para diferentes sites universitários, organizações
, sites do governo, e se você der uma olhada, por padrão, ele só vai aparecer como
seus links azuis tradicionais com sublinhado, o texto ali mesmo.
Mas o que eu quero fazer é entrar e dizer,
você sabe o que, todos aqueles que terminam em .org?
Faça-os de uma cor.
Todos os que são .edu, outra cor, e
todos os que terminam em .gov, uma terceira cor.
Vamos ver o que parece.
Aqui, você pode ver que sem eu ter que colocar em qualquer informação dentro das
próprias tags, o navegador tem coloridos eles a cor adequada.
Ok, eu acabei de cobrir um monte de coisas em um vídeo muito curto.
Tens de perceber que estas ideias vão fundir-se.
Você vai estar usando classes,
você vai estar usando IDs, você vai estar usando atributos.
E o importante que eu quero que você saiba é que quando você
está adicionando todas essas coisas juntas, a ordem em que você escreve classes e
identidades diferentes em seu texto não importa.
Não importa se você tem especial escuro precoce ou escuro precoce especial.
O que realmente importa é a ordem em que você escreve suas regras em sua folha de estilo.
Os navegadores estão sempre indo para começar para o topo, e aplicar cada regra.
Agora a boa notícia desta palestra é que eu quero que você perceba
que com o poder das classes e ids e esta folha de estilo em cascata é
que isso significa que você pode usar folhas de estilo de outras pessoas para estilizar seu código.
E você pode apenas adicionar uma classe que altera o pequeno atributo
que talvez você não tenha gostado sobre isso.
Você pode substituir essas folhas de estilo e torná-lo seu próprio.
Apenas certifique-se de vincular sua folha de estilo por último.
Tudo bem, já cobrimos muita coisa, e
espero não ter te sobrecarregado com o vídeo.
Eu só quero que você se lembre que quando fazemos seletores de tipos e
o tipo de coisas que eu vou ter que fazer nesta classe é que nós normalmente
estamos adicionando-os para restringir o escopo de onde as regras são aplicadas.
Então não queremos estilizar tudo.
Só queremos estilizar certas coisas.
Um id é usado para especificar um elemento específico em uma página, e
classes são usadas para associar elementos que realmente tendem a ter a aparência semelhante.
Então, à medida que continuarmos, sei que vou ter alguns exemplos de código comigo.
Espero que você pare, pegue seu laptop, e
realmente codifique comigo para ter uma idéia de como essas coisas diferentes podem ser poderosas.
Obrigado.