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:

css3

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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. André Santos
    30 de novembro de 2011

    And… :first-child e :last-child
    Existe um artigo no net tutsplus mais completo já agora:
    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz