Páginas

CSS - AVANÇADO


Trabalhar com seletores CSS é extremamente interessante. De fato, é muito divertido quando você inicia seu desenvolvimento e vê as coisas tomando forma na sua frente. Mas você já parou para estudar alguns dos seletores CSS mais avançados? Se não; vai por mim, você vai perceber que eles fazem milhares de milagres em milhares de ocasiões. E podem salvar sua vida.
Podemos ser bastante específicos na hora de selecionar algum elemento com CSS, sem precisar alterar nada no HTML do seu documento.
Dentre as possibilidades de seleção, podemos utilizar seletores de atributos, negação, de irmãos e filhos, pseudo-classes, pseudo-elementos e assim por diante.
Hoje vamos deixar um pouco as classes e IDs de lado para mergulhar em um mundo de seletores um tanto interessantes e úteis.
Mas primeiro… Se você ainda não leu nosso artigo sobre a especificidade CSS, tire um tempo para ler. Este assunto está completamente ligado ao assunto que discutiremos aqui.
Agora vamos aos códigos…
Seletores CSS de atributo
A maioria das tags que utilizamos em nosso desenvolvimento têm algum atributo qualquer, veja um exemplo:
1
2
Tutsup
Span
Mesmo que o trecho acima seja minúsculo e não faça nada demais, ali eu tenho dois atributos que podem ser utilizados com os seletores CSS de atributo: href e class.
Para selecionar qualquer elemento utilizando seu atributo em CSS, basta colocar tal atributo entre colchetes, com o valor procurado entre aspas:
1
2
3
a[href="http://www.todoespacoonline.com/w"]{
  background:red;
}
No trecho acima, todos os links com a URLhttp://www.todoespacoonline.com/w terão o fundo vermelho.
Você pode utilizar o atributo que quiser com o valor que precisar, veja mais exemplos:
1
2
3
4
5
6
7
*[name="nome"]{
  background:#000;
  color:#fff;
}
span[class="meu_span"]{
  color:#ff0000;
}
No primeiro trecho acima, selecionamos todos os elementos (*) que têm o atributo name igual a nome; no segundo, selecionamos todos os elementos span com a classe (class) meu_span.
Você pode até fazer coisas que depois vai ler e pensar: “Por que eu fiz isso?“.
Tipo isso:
1
2
3
.meu_span[class="meu_span"]{
  color:#ff0000;
}
E funciona muito bem, obrigado! Apesar de estarmos selecionando a classe .meu_span com o atributo class igual a meu_span (pra quê????).
Eles fazem mais do que isso, muito mais…
Talvez a primeira parte desse tutorial não tenha lhe impressionado, porém, os seletores CSS de atributo fazem muito mais do que foi descrito anteriormente. Veja abaixo:
·            elemento[atributo=”valor”]
O código acima é o mesmo que foi explicado na primeira parte sobre seletores CSS de atributo.
·            elemento[atributo~=”valor”]
O atributo do elemento selecionado deverá conter uma lista de valores separados por espaços (por exemplo: class=”classe1 classe2″). O valor selecionado deve estar entre a lista de valores do atributo do elemento.
·            elemento[atributo|=”valor”]
O atributo do elemento deve começar com a palavra “valor” (ou o que você escolher), ou deve ser diretamente seguido por um traço, tipo “valor-algo” (ou o que você quiser).
·            elemento[atributo^=”valor”]
O valor do atributo deve começar com a palavra que você escolher, neste caso, “valor”.
·            elemento[atributo$=”valor”]
O valor do atributo deve terminar com a palavra que você escolher, neste caso, “valor”.
·            elemento[atributo*=”valor”]
O valor do atributo deve conter a palavra que você escolher, neste caso, “valor”, em qualquer parte. Início, meio, ou fim.
Veja exemplos:
1
2
3
div[class~='classe2']{
  color:red;  
}
Todos os divs que têm uma lista (~) de classes (class) e uma dessas classes é a classe2.
1
2
3
4
5
6
span[id|="meu"]:before{
  content: 'Um span lindo: ';
  font-style: italic;
  background:red;
  color:white;
}
Pseudo-elemento :before do span cujo id começa com (|) meu oumeu-alguma-coisa.
1
2
3
4
5
p[id^="casca-"]{
  margin:0;
  padding:0;
  background:yellow;
}
Parágrafo cujo o id começa exatamente (^) com “casca-“.
1
2
3
4
5
6
7
8
.nossa-logo-linda[src$=".png"]{
  display:block;
  clear:both;
  border:1px solid white;
}
.nossa-logo-linda[src$=".png"]:hover{
  border:1px solid black;
}
Elemento com classe .nossa-logo-linda, cujo atributo srctermina ($) com .png.
1
2
3
4
5
6
p[class*="_lights_"]{
  background:black;
}
p[class*="_lights_"]:hover{
  color:white;
}
Parágrafo com classe que contém (*) a palavra _lights_.
Veja o HTML que combina com cada um dos trechos acima.
1
2
3
4
5

Um valor qualquer.
Olha o span!

Olha a banana.

Classe loucona!
Teste o CSS e HTML descritos acima para ver os seletores CSS de atributo em ação.
Deu para perceber a utilidade dos seletores CSS de atributo? Provavelmente eles vão salvar sua vida qualquer dia desses!
Pai > filho – Seletor de filhos (Child)
O “seletor de filhos” >, provavelmente é bastante utilizado hoje em dia, porém, ele não poderia ficar de fora dessa lista.
Sua função é selecionar os elementos que são filhos diretos do elemento pai, por exemplo:
HTML
1
2
3

  
Sou um filho.

CSS
1
2
3
.pai > .filho{
   background:red;
}
No trecho acima, p recebe a atualização de cor de fundo para vermelho por ser filho direto do DIV pai.
Combinação de irmãos: + e ~
Esses seletores (+ e ~) servem para combinar dois elementos filhos do mesmo pai (irmãos) que vêm um seguido do outro, por exemplo:
1
2
3
h2 + p{
  background:red;
}
Isso selecionaria todos os primeiros parágrafos que vêm logo depois de um título H2, mas nenhum outro além disso. Veja um demo.
Outro modo para fazer isso, é utilizando o ~. Veja:
1
2
3
h2 ~ p{
  background:red;
}
Agora selecionamos todos os parágrafos que vêm depois de um H2, não apenas o primeiro. Veja um demo.
Pseudo-classes
Pseudo-classes são bastante utilizadas atualmente, e com a introdução do CSS3, agora elas são muitas, e estão cada vez mais úteis.
As pseudo-classes são aquelas que vêm depois de dois pontos (:) após seu seletor, exemplo:
1
2
3
p:hover{
  background:red;
}
O :hover no trecho acima, é uma pseudo-classe.
Vamos ver a maioria das pseudo-classes disponíveis abaixo.
:link
Indica que o elemento é um link e ainda não foi visitado pelo usuário.
1
2
3
4
a:link{
  background:red;
}
:visited
Exatamente o contrário de :link. São os links visitados.
1
2
3
a:visited{
  background:blue;
}
:hover
Quando o usuário passa o mouse sobre qualquer elemento.
1
2
3
a:hover{
  background:black;
}
:active
Quando o usuário clica em um botão ou link.
1
2
3
a:active{
  background:green;
}
:focus
Quando um elemento está em foco. Ativo para digitação.
1
2
3
input:focus{
  background:red;
}
:first-child
:first-child permite que você selecione o primeiro elemento dentro do elemento pai que selecionar.
Por exemplo, eu poderia selecionar um li dentro de uma ul e dizer que o fundo desse primeiro li será vermelho:
1
2
3
ul li:first-child{
  background:red;
}
Simples assim!
:target
Quando você tem fragmentos em uma URL (com #), exemplo:
http://www.todoespacoonline.com/w/#elemento
O #elemento é o fragmento que se refere a um elemento com ID ou nome “elemento“. Isso significa que quando você clicar no link com o fragmento, a página irá rolar a barra de rolagem até este elemento.
Com :target você poderá estilizar o estilo do elemento de destino (#elemento) após o link ter sido clicado.
1
2
3
*:target{
  background:red;
}
Agora o elemento ficará com fundo vermelho assim que o link com fragmento for clicado.
:disabled, :enabled e :checked
Normalmente essas pseudo-classes fazem referências a elementos de formulários, que podem ser ativados (enabled), desativados (disabled) ou marcados (checked).
Você pode aplicar um CSS diferente para cada um dos estados dos elementos.
Veja exemplos:
1
2
3
4
5
6
7
8
9
input:disabled{
  background:red;
}
input:enabled{
  background:blue;
}
input:checked{
  margin: 50px;
}
:last-child
:last-child permite que você selecione o último elemento dentro de um elemento pai.
Por exemplo: eu poderia selecionar o último li dentro de uma ule dizer que o fundo desse li será vermelho:
1
2
3
ul li:last-child{
  background:red;
}
:empty
Seleciona todos os elementos vazios dentro do elemento que você escolher. Exemplo:

É considerado um DIV vazio, porém, se existir um espaço dentro desse elemento, o seletor não irá mais considerar este DIV como vazio.
1
2
3
4
div:empty{
  padding:50px;
  background:red;
}
:nth-child
Este é um dos meus seletores favoritos, ele faz coisas incrivelmente incríveis. Porém, não vamos entrar em detalhes sobre :nth-child aqui, pois, fizemos um artigo completo falando exclusivamente sobre este seletor CSS.
Segue o link:
·            Seletor CSS3 nth-child
Apesar de existirem algumas variações desse seletor, se você entender como ele funciona, as variações não serão muito diferentes, apenas o comportamento do CSS em si.
:first-of-type e :last-of-type
Ambos indicam o primeiro e último elemento de um determinado tipo, respectivamente, dentro de um elemento pai.
Por exemplo, um DIV que envolve um artigo de blog pode conter milhares de elementos, tais como: parágrafos, imagens, iframes de vídeos do Youtube e assim por diante. Esses elementos podem se repetir várias vezes, porém, se você quiser saber qual é o primeiro de cada tipo, ou aplicar qualquer estilo CSS para diferenciar este elemento do resto do artigo, pode utilizar os seletores da seguinte maneira:
1
2
3
4
div:first-of-type{
  padding:50px;
  background:red;
}
:only-child
Representa um único elemento filho de um elemento pai.
Por exemplo: suponhamos que na sua página dinâmica, seus elementos podem gerar um ou mais elementos para preencher determinado espaço na página, porém, quando você tem um elemento apenas, o espaço que sobra nos cantos é muito grande, e fica feio. Você pode aplicar um estilo para quando existe apenas um elemento utilizando :only-child.
1
2
3
4
.classe div:only-child{
  padding:150px;
  background:blue;
}
:only-of-type
Representa um elemento que é o único do seu tipo dentro do seu pai. Por exemplo: um único parágrafo dentro de um DIV, ou qualquer elemento único de seu tipo:
1
2
3
4
.classe p:only-of-type{
  padding:150px;
  background:blue;
}
Negação – :not()
Essa é a melhor de todas até agora!
Você também pode negar em CSS, ou seja, todos os elementos que você selecionar, menos os que você colocar dentro da pseudo-classe “:not()”.
Um exemplo disso, seria colocar estilo diferenciado para todos os links externos do seu site, veja:
1
2
3
a[href^="http"]:not([href*="todoespacoonline.com/w"]){
  background:red;
}
Ou seja, estamos selecionando todos os links que começam (^) com http, mas, que não contém o nosso domínio “todoespacoonline.com/w“. Resumindo: links externos!
Você também pode falar em classes, veja:
1
2
3
a:not(.classe){
  background:red;
}
Todos os links menos aquela classe “.classe“.
Pseudo-elementos
::first-line
Encontra a primeira linha de um elemento. Você pode alterar o que preferir nessa primeira linha.
1
2
3
p::first-line{
  color:red;
}
::first-letter
Seleciona a primeira letra de um elemento.
1
2
3
4
5
6
p::first-letter{
  float:left;
  font-size:100px;
  margin:10px;
  color:red;
}
O trecho acima, faz a primeira letra de um parágrafo ficar grande e flutuante, parecendo aquelas letras de revista que a gente costuma ler.
::before e ::after
Na minha opinião, umas das melhores funções do CSS são esses dois pseudo-elementos. Eles servem para incluir algo no início (:before) ou final (:after) de qualquer elemento que você estiver selecionando.
Por exemplo: suponhamos que você queira que a palavra “Nota: ” apareça antes do texto de um parágrafo com classe “.nota”. Simples, veja:
1
2
3
.nota:before{
  content: 'Nota: ';
}
Ou se você quiser adicionar depois:

1
2
3
4
.nota:after{
  content: ' (Nota)';
}

Postado por: Matheus Dias

Nenhum comentário:

Postar um comentário

Assinar: Postagens (Atom)