Curso de CSS – Aula 02 | Seletores CSS

Primeiramente, vamos explorar o uso dos seletores de elemento, classe e ID no CSS. Enfim, utilizamos os seletores para identificar os elementos HTML aos quais desejamos aplicar estilos específicos. Então, entender como usar esses seletores de forma adequada é essencial para estilizar elementos de maneira precisa e seletiva.

Seletores CSS de Elemento

Os seletores de elemento são os mais simples e básicos. Ou seja, eles permitem selecionar todos os elementos HTML que correspondem a uma determinada tag.

• Seletor de tag: Para selecionar todos os parágrafos (tag <p>), utilizamos o seletor p.
• Seletor de cabeçalho: Para selecionar todos os cabeçalhos de nível 1 (tag <h1>), utilizamos o seletor h1.
• Seletor de lista: Para selecionar todas as listas não ordenadas (tag <ul>), utilizamos o seletor ul.

Seletores CSS de Classe

Os seletores de classe permitem selecionar elementos HTML que possuem uma classe específica atribuída a eles. Enfim, reutilizamos em diferentes elementos as classes que são definidas no código HTML.

• Seletor de classe: Para selecionar elementos com a classe “destaque”, utilizamos o seletor .destaque.
• Seletor de classe em combinação com tag: Para selecionar todos os parágrafos com a classe “destaque”, utilizamos o seletor p.destaque.

Seletores CSS de ID

Utilizamos os seletores de ID para selecionar um elemento HTML específico que possui um ID único atribuído a ele. Ou seja, os IDs devem ser únicos dentro de um documento HTML.

• Seletor de ID: Para selecionar um elemento com o ID “cabecalho”, utilizamos o seletor #cabecalho.

Combinação de seletores

É possível combinar seletores para tornar as seleções mais específicas e direcionadas. Enfim, isso permite estilizar apenas os elementos desejados.

• Combinação de seletor de elemento e classe: Para selecionar todas as divs com a classe “container”, utilizamos o seletor div.container.
• Combinação de seletor de elemento e ID: Para selecionar a imagem com o ID “logo”, utilizamos o seletor img#logo.

Então, exploramos o uso dos seletores de elemento, classe e ID no CSS. Enfim, os seletores são poderosas ferramentas para selecionar elementos HTML específicos e aplicar estilos de forma seletiva. Além disso, ao dominar esses seletores, você terá maior controle sobre a estilização dos elementos em suas páginas da web. Lembre-se de praticar e experimentar diferentes combinações de seletores para alcançar os resultados desejados.

Seletores de descendência e de filho direto

Agora, vamos explorar os seletores de descendência e de filho direto no CSS. Enfim, esses seletores permitem selecionar elementos HTML com base em sua relação com outros elementos dentro da estrutura do documento. Ou seja, compreender o uso desses seletores é fundamental para aplicar estilos de forma seletiva e precisa.

Seletores de Descendência

Os seletores de descendência permitem selecionar elementos HTML que são descendentes de outro elemento especificado. Enfim, essa seleção é baseada na estrutura de aninhamento dos elementos no código HTML.

• Seletor de descendência: Para selecionar todos os elementos <span> que estão dentro de um elemento <div>, utilizamos o seletor div span.
• Seletor de descendência combinado com classe: Para selecionar todas as listas não ordenadas (<ul>) que estão dentro de um elemento com a classe “menu”, utilizamos o seletor .menu ul.

Seletores de Filho Direto

Os seletores de filho direto permitem selecionar elementos HTML que são filhos diretos de outro elemento especificado. Ou seja, essa seleção é mais restrita e exclui elementos que estão mais abaixo na hierarquia.

• Seletor de filho direto: Para selecionar todos os elementos <li> que são filhos diretos de um elemento <ul>, utilizamos o seletor ul > li.
• Seletor de filho direto combinado com classe: Para selecionar todos os elementos com a classe “item” que são filhos diretos de um elemento com a classe “lista”, utilizamos o seletor .lista > .item.

Diferença entre seletores de descendência e de filho direto

A diferença fundamental entre os seletores de descendência e de filho direto está na restrição de profundidade. Enfim, o seletor de descendência seleciona todos os elementos que são descendentes de outro elemento, independentemente da sua profundidade na estrutura do documento. Entretanto, já o seletor de filho direto seleciona apenas os elementos que são filhos diretos de outro elemento, excluindo elementos que estão mais abaixo na hierarquia.

Agora, vamos explorar os seletores de descendência e de filho direto no CSS. Enfim, esses seletores permitem selecionar elementos com base em sua relação com outros elementos dentro da estrutura do documento. Ou seja, com o uso desses seletores, você terá maior controle sobre a seleção e aplicação de estilos de forma seletiva. Lembre-se de praticar e experimentar diferentes combinações de seletores para obter os resultados desejados em suas páginas da web.

Pseudo-classes e Pseudo-elementos

Nesta aula, vamos explorar as pseudo-classes e pseudo-elementos no CSS. As pseudo-classes e pseudo-elementos são recursos poderosos que permitem selecionar e estilizar elementos HTML com base em seu estado ou posição relativa a outros elementos. Compreender o uso desses recursos é fundamental para criar estilos dinâmicos e personalizados em suas páginas da web.

Pseudo-classes

Utilizamos as pseudo-classes para selecionar elementos com base em um estado específico ou uma interação do usuário. Elas são adicionadas aos seletores existentes e permitem aplicar estilos especiais a esses elementos.

• :hover: Seleciona um elemento quando o cursor do mouse está sobre ele.
• :active: Seleciona um elemento quando está sendo clicado pelo usuário.
• :visited: Seleciona um link que já foi visitado pelo usuário.
• :focus: Seleciona um elemento quando está em foco, como um campo de formulário após ser clicado.

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

Pseudo-elementos

Os pseudo-elementos permitem adicionar estilos a partes específicas de um elemento HTML.

• ::before: Cria um elemento fictício antes do conteúdo de um elemento.
• ::after: Cria um elemento fictício depois do conteúdo de um elemento.
• ::first-letter: Seleciona a primeira letra de um elemento.
• ::first-line: Seleciona a primeira linha de um elemento.

p::before {
  content: "Antes";
  font-weight: bold;
}

h1::after {
  content: " - Título";
  color: blue;
}

Combinação de pseudo-classes e pseudo-elementos

É possível combinar pseudo-classes e pseudo-elementos com outros seletores para criar estilos mais específicos e personalizados.

li:first-child::before {
  content: "• ";
}

input[type="text"]:required:invalid {
  border: 2px solid red;
}

Por fim, exploramos as pseudo-classes e pseudo-elementos no CSS. Enfim, esses recursos nos permitem selecionar e estilizar elementos HTML com base em seu estado, interação ou partes específicas. Ou seja, as pseudo-classes e pseudo-elementos oferecem uma variedade de possibilidades para criar estilos dinâmicos e personalizados em suas páginas da web. Enfim, lembre-se de praticar e experimentar diferentes combinações de pseudo-classes e pseudo-elementos para obter os resultados desejados em seus projetos.

Curso de CSS – Aula 03 | Propriedades e valores básicos