Operadores CSS

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.

Adicionar um comentário