Os operadores CSS são símbolos especiais que são utilizados para combinar seletores e aplicar regras a elementos específicos em uma página da web.
Os operadores mais comuns são:
Operador de seleção universal (*)
Este operador seleciona todos os elementos dentro de um documento HTML.
Operador de Classe (.)
É utilizado para selecionar elementos que possuem um atributo de classe específico. Por exemplo, p.minha-classe seleciona todos os elementos p que possuem a classe minha-classe.
No exemplo abaixo, todos os elementos HTML que possuem uma classe “botão” terão um estilo específico aplicado a eles.
.button {
background-color: blue;
color: white;
padding: 10px 20px;
text-align: center;
}
Podemos aplicar essa classe a botões, links ou qualquer outro elemento que desejar. Por exemplo, no HTML:
<button class=”button”>Clique aqui</button>
<a href=”#” class=”button”>Link de Exemplo</a>
Ambos os botões e o link herdarão os estilos definidos para a classe “button” no CSS.
O uso de classes é uma técnica muito importante no CSS, pois permite que você aplique estilos a elementos específicos, independentemente de seu tipo ou posição no documento HTML.
Operador de ID (#)
É utilizado para selecionar elementos HTML que têm um atributo “id” específico. Diferentemente do operador de classe (.) que pode ser usado para aplicar estilos a vários elementos com a mesma classe, o operador de ID seleciona um elemento exclusivo em toda a página, pois o valor do atributo “id” deve ser único na página HTML.
Podemos usar o operador de ID da seguinte forma:
#header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
Neste exemplo, qualquer elemento HTML com o atributo “id” definido como “header” terá o estilo especificado aplicado a ele. Por exemplo, no HTML, podemos utilizar assim:
<div id=”header”>
<h1>Título do Site</h1>
</div>
O elemento <div> com o atributo “id” definido como “header” será estilizado de acordo com as regras CSS definidas.
O uso de IDs deve ser único em uma página HTML, um mesmo “id” não deve ser aplicado a múltiplos elementos.
Operador de Pseudo-classe (:)
As pseudo-classes são usadas para selecionar elementos HTML com base em estados específicos ou interações do usuário. Elas são identificadas pelo uso de dois pontos (:) e são adicionadas aos seletores CSS para aplicar estilos a elementos com base em seu estado.
Pseudo-classe :hover:
Seleciona um elemento quando o cursor do mouse está sobre ele.
Exemplo:
a:hover {color: blue;}
Altera a cor do texto de links quando o mouse passa sobre eles.
Pseudo-classe :active:
Seleciona um elemento quando ele está ativo (por exemplo, quando o botão do mouse é pressionado).
Exemplo:
button:active {background-color: red;}
Altera a cor de fundo de um botão quando ele está sendo clicado.
Pseudo-classe :focus:
Seleciona um elemento quando ele recebe foco, geralmente por meio de teclado ou interações com o navegador.
Exemplo:
input:focus {border: 2px solid green;}
Adiciona uma borda verde a um campo de entrada quando ele está em foco.
As pseudo-classes são importantes pois permitem aplicar estilos com base em interações do usuário e na posição dos elementos. Elas são frequentemente usadas em combinação com seletores de elementos para controlar o comportamento de diferentes partes de uma página da web.
Operador de Atributo: ([atributo=valor])
O operador de atributo em CSS permite selecionar elementos HTML com base em os valores de seus atributos. Ele é usado para aplicar estilos a elementos que possuam um atributo específico com um determinado valor. A sintaxe básica do operador de atributo é a seguinte:
seletor[atributo=valor] {
propriedade: valor;
}
seletor: É o que você deseja selecionar no documento HTML, como uma tag HTML, uma classe, uma ID.
[atributo=valor]: É o operador de atributo. Ele seleciona elementos que possuem um atributo específico com um valor correspondente.
propriedade: valor: Aqui, você define as propriedades CSS e os valores que deseja aplicar aos elementos selecionados.
Operador de Agrupamento (,)
O operador de agrupamento (`,`) em CSS é usado para agrupar múltiplos seletores e aplicar as mesmas regras de estilo a todos eles. Isso permite que você defina um conjunto comum de estilos para vários elementos sem ter que repetir as regras de estilo em várias regras CSS separadas.
Exemplo:
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}
As regras de estilo se aplicam a todos os elementos <h1>, <h2> e <h3>. Podemos listar quantos seletores quiser, separando-os por vírgulas.
Operador de Negação (:not())
O operador de negação :not() em CSS é uma pseudo-classe que permite selecionar elementos que não correspondem a um determinado seletor. Essa pseudo-classe é útil quando você deseja aplicar estilos a elementos específicos, excluindo outros que correspondem a um seletor geral. O formato básico da pseudo-classe :not() é o seguinte:
:not(seletor) {estilos a serem aplicados a elementos que NÃO correspondem ao seletor}
Alguns exemplos de como podemos utilizar:
Excluir um elemento com uma classe específica:
p:not(.special) {color: blue;}
Aplicará a cor azul a todos os elementos `<p>` que não têm a classe “special”.
Excluir um elemento com uma ID específica:
div:not(#exemplo) {background-color: yellow;}
Aplicará um fundo amarelo a todos os elementos `<div>` que não têm o ID “exemplo”.
A pseudo-classe :not() é uma maneira eficaz de aplicar estilos de forma seletiva a elementos específicos, excluindo outros com base em critérios de seleção.
Operadores de Combinação
Operadores de Combinação (>, + e ~) são utilizados para combinar e selecionar elementos de forma específica. Aqui estão alguns exemplos de operadores de combinação em CSS:
Espaço ( ) – Combinador descendente:
Seleciona elementos que são descendentes de outro elemento.
Exemplo:
div p {color: blue;}
Isso seleciona todos os elementos p que são descendentes de um elemento <di>v.
Maior que (>) – Combinador de filho direto:
Seleciona elementos que são filhos diretos de outro elemento.
Exemplo:
ul > li {list-style-type: square;}
Seleciona todos os elementos <li> que são filhos diretos de uma lista não ordenada <ul>.
Sinal de adição (+) – Combinador adjacente:
Seleciona um elemento que é imediatamente precedido por outro elemento.
Exemplo:
h2 + p { font-weight: bold;}
Seleciona todos os elementos <p> que são precedidos diretamente por um elemento <h2>.
(~) – Combinador de irmãos gerais:
Seleciona elementos que são irmãos de outro elemento, não necessariamente adjacentes.
Exemplo:
h3 ~ p {font-style: italic;}
Seleciona todos os elementos <p> que são irmãos do elemento <h3>, independentemente de sua proximidade no documento.
Os operadores de combinação em CSS permitem que você selecione elementos de maneira mais precisa e específica, com base em sua relação com outros elementos no documento HTML. Isso é útil para aplicar estilos de forma seletiva a partes específicas de uma página da web.
Esses são alguns dos operadores mais comuns em CSS que permitem selecionar e aplicar estilos a elementos específicos em uma página da web.
