Seletores Complexos

Seletores


A sintaxe do CSS é simples: seletor { propriedade: valor;
}
 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.

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


Exemplo de seletor encadeado:

div p strong a { color: red;
}

Seletores agrupados


Exemplo de seletor agrupado:

strong, em, span { color: red;
}

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; }

GRADIENTE
Uma das features mais interessantes é a criação de gradientes apenas utilizando CSS. Todos os browsers mais novos como Safari, Opera, Firefox e Chrome já aceitam essa feature e você pode utilizá-la hoje. Os
Internet Explorer atuais (8 e 9) não reconhecem ainda, contudo você poderá utilizar imagens para estes browsers que não aceitam essa feature. Você pode perguntar: “Mas já que terei o trabalho de produzir a imagem do gradiente, porque não utilizar imagens para todos os browsers?“ Lembre-se que se utilizar uma imagem, o browser fará uma requisição no servidor buscando essa imagem, sem imagem, teremos uma requisição a menos, logo o site fica um pouquinho mais rápido. Multiplique isso para todas as imagens de gradiente que você fizer e