Web Design para iniciantes

Seletores

Existem vários tipos de seletores. Tratarei aqui apenas de três formas que conseguem cobrir muitos casos de uso. Se você quiser aprender mais, este artigo traz alguns mais complexos.

Seletor por elemento

É quando selecionamos utilizando o nome do elemento. Ao fazer isso, todos os elementos iguais serão afetados. Por exemplo, no código abaixo, todos os parágrafos ficarão com a cor de fonte azul.

p {
    color: #000088;
}

Seletor por classe

Ao selecionar por classe, todos os objetos que tiverem a classe indicada serão afetados. No exemplo abaixo, todos os elementos que tiverem como atributo class="classe" ficarão com texto em negrito:

.classe {
    font-weight: bold;
}

Seletor por id

#iddoobjeto {
    border: 1px solid #CCC;
}

Aprenda seletores com um joguinho

Aprenda a usar os seletores acima e outros tipos com este joguinho desenvolvido por Atul Varma da Mozilla e traduzido livremente para português pela Paula Furtado.

Dúvidas? Deixe suas perguntas aqui.