• Tweet
• Email

• Tweet
• Email

A linguagem CSS tem sido amplamente abordada aqui na Escola Criatividade e a verdade é que continuará a ser, sendo que a tendência é que seja cada vez mais. A recente chegada do HTML5 veio fazer uma dupla incrível com CSS3, abrindo o leque de possibilidades existentes com a combinação destas duas linguagens. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas, por isso trazemos-lhe hoje 15 Selectores CSS que nunca deverá esquecer!

Não perca alguns dos conteúdos anteriores relacionados com CSS:

• Aprender o básico sobre CSS
• Aprender o avançado sobre CSS
• 40 Ferramentas CSS Extremamente Úteis e Poderosas
• Como criar um menu simples e bonito em CSS em apenas 2 passos
• 40 Ferramentas CSS Extremamente Úteis e Poderosas
• 10 Programas de Edição HTML e CSS para Windows e Linux
• CSS para Tótós!

1. :NOT

div:not(#teste) {
   color: red;
}

Imagine que quer seleccionar todas as div à excepção da div #teste – utilize :not.

2. :HOVER

div:hover {
  background: #ffffff;
}

Com :hover poderá definir o que acontece quando o mouse passa por cima de algo.

3. :CHECKED

input[type=radio]:checked {
   border: 3px solid red;
}

Com :checked irá actuar apenas elementos seleccionados, como um radio button ou uma checkbox.

4. a[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

Com este código irá actuar apenas no texto âncora que estiver a linkar para imagens, irão ficar a vermelho.

5. a[href^="http"]

a[href^="http"] {
   background: url(path/icon_links.jpg) no-repeat;
   padding-left: 10px;
}

Com este código irá posicionar uma imagem definida junto aos links para indicar aos seus visitantes que irão estar a navegar para fora do seu website.

6. a[href*="criatividade"]

a[href*="criatividade"] {
  color: #ff0000;
}

Com este código, todos os links que tiverem “criatividade” irão ser estilizados de acordo com o definido.

7. a[href="http://www.escolacriatividade.com"]

a[href="http://www.escolacriatividade.com"] {
  color: #ff0000;
}

Este código é semelhante ao anterior mas é mais específico, podendo definir cores diferentes para diferentes websites.

8. a[title]

a[title] {
   color: red;
}

Este código irá seleccionar apenas os textos âncora que tenham o atributo title e estilizá-los de acordo com o definido.

9. ~

ul ~ p {
   color: red;
}

Com este código você irá seleccionar todos os elementos “p” desde que sejam precedidos por um “ul”.

10. +

ul + p {
   color: red;
}

Com este códigovocê irá seleccionar apenas o elemento “p” que seja precedido por um “ul”.

11. :visited e :link

a:link { color: red; }
a:visted { color: green; }

Este código é extremamente fácil de compreender: o link activo e os links visitados irão ser estilizados de acordo com o definido.

12. X

o X simboliza qualquer selector, isto é, se utilizar um a ou um ul irá estar a estilizar todos os elementos.

a { color: red; }
ul { margin-left: 20px; }

13. .X

.alarm {
  color: green;
}

Este é um selector de classes, a diferença entre uma classe e um id é que com uma classe podemos alcançar múltiplos elementos.

14. #X

#teste {
   width: 500px;
   margin: auto;
}

Este é um selector de id. A diferença entre uma classe e um id é que com uma classe podemos alcançar múltiplos elementos.

15. *

* {
 margin: 5px;
 padding: 0;
}

Tal como é usado em outras àreas, o asterisco selecciona tudo. Aquilo que definir será aplicado a todos os elementos da página.

Abraço e até já!