A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa aprender do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades são criadas todos os dias e não é um ato de heroísmo você saber todas as propriedades do CSS e seus respectivos valores.
Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá escolher um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa parte da inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente.
O que é um seletor?
O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados.
Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose durante o dia a dia. Para você lembrar o que são seletores encadeados e agrupados segue um exemplo abaixo:
Exemplo de seletor encadeado:
div p strong a {
color: red;
}
Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez está dentro de um DIV.
Exemplo de seletor agrupado:
strong, em, span {
color: red;
}
Você agrupa elementos separados por vírgula para que herdem a mesma formatação.
Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos código Javascript são os seletores complexos.
Os seletores complexos selecionam elementos que talvez você precisaria fazer algum script em Javascript para poder marcá-lo com uma CLASS ou um ID para então você formatá-lo. Com os seletores complexos você consegue formatar elementos que antes eram inalcançáveis.
Exemplo de funcionamento
Imagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim:
h1 + p {
color:red;
}
Esses seletores é um dos mais simples e mais úteis que eu já utilizei em projetos por aí. Não precisei adicionar uma classe com JQuery, não precisei de manipular o CMS para marcar esse parágrafo,não precisei de nada. Apenas apliquei o seleto.
Abaixo, veja uma lista de seletores complexos e quais as suas funções. Não colocarei todas as possibilidades aqui porque podem haver modificações, novos formatos ou outros formatos que podem ser descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela.
Oops! This image does not follow our content guidelines. To continue publishing, please remove it or upload a different image.
