Css Seletores avançados

 

Os seletores avançados do CSS permitem selecionar elementos com base em suas características e relações com outros elementos HTML. Alguns seletores avançados incluem:

1. Pseudo-classes: são seletores que se aplicam a elementos em estados específicos, como hover, focus, active e visited.

Exemplo:

css
a:hover {
  color: red;
}

2. Pseudo-elementos: são seletores que permitem estilizar partes específicas de um elemento, como o primeiro caractere, a primeira linha ou o último filho.

Exemplo:

css
p::first-letter {
  font-size: 200%;
  font-weight: bold;
}

3. Combinadores: são seletores que combinam vários seletores em uma única regra. Os combinadores mais comuns são o espaço (seleciona elementos aninhados dentro de outros elementos), o sinal ">" (seleciona elementos filhos diretos) e o sinal "+" (seleciona o irmão adjacente).

Exemplo:

css
div p {
  color: red;
}

ul > li {
  font-weight: bold;
}

h2 + p {
  margin-top: 0;
}

4. Atributos: são seletores que selecionam elementos com base em seus atributos HTML.

Exemplo:

css
a[href^="https"] {
  color: green;
}

input[type="text"] {
  border: 1px solid black;
}

Esses são apenas alguns dos seletores avançados do CSS. A utilização desses seletores pode tornar seu código CSS mais eficiente e modular, permitindo que você crie estilos mais específicos e precisos