Como modificar um elemento com CSS se NÃO tivermos uma classe ou identificador com pseudo-classes

Muitas vezes você deseja modificar um elemento do seu site com CSS, mas ao fazê-lo percebe que o elemento não possui nenhuma classe ou identificador.

Não se preocupe, nem tudo está perdido.

Graças às PseudoClasses podemos fazer muito mais do que você imagina e neste tutorial vamos ver como fazer.

Tudo o que veremos neste tutorial ele funciona para qualquer página que você fizer com HTML e CSS.

E especificamente, é claro que é válido para o WordPress, de fato, em nossos exemplos, faremos isso no WordPress.

📺️ Tutorial em vídeo:

:first-of-type Modificar apenas o primeiro elemento

Esta pseudo-classe nos permite modificar apenas o primeiro elemento de seu tipo entre um grupo de elementos irmãos.

Agora vamos ver exemplos concretos, mas aqui você tem uma ajuda muito bom sobre essa pseudoclasse.

A primeira coisa que vamos modificar é o primeiro elemento de um menu:

Normalmente o que eu faço quando quero modificar algo é entrar no inspetor de elementos do meu navegador (botão direito –> Inspecionar) e verificar se o elemento a ser modificado possui uma classe ou um identificador:

O elemento que eu quero modificar tem um identificador específico então eu realmente não preciso usar pseudo classes.

Mas imagine que você já viu e que eu não sei se tem identificador 🙈

Vou modificar esse elemento como se esse identificador não existisse.

Para fazer uso das pseudo-classes, tenho que adicionar a pseudo-classe precedida por dois pontos:

#top-menu li:first-of-type {
    margin-right: 140px;
}

E o resultado é:

Como podemos ver na captura de tela acima, há apenas a margem direita aplicada ao primeiro elemento.

:last-of-type Modificar apenas o último elemento

Da mesma forma que no exemplo anterior, podemos modificar apenas o último elemento.

Desta vez, usaremos :last-of-type da seguinte maneira:

#top-menu li:last-of-type {
    margin-right: 140px;
}

E o resultado seria:

:nth-of-type Modifique o elemento ou elementos que queremos

Essa pseudo-classe é muito poderosa porque podemos referenciar qualquer elemento específico que queremos ou criar padrões para que vários elementos sejam selecionados.

Vamos imaginar que eu precise modificar o segundo elemento do meu menu, para isso usaríamos nth-of-type da seguinte forma:

#top-menu li:nth-of-type(2) {
    margin-right: 140px;
}

Crie padrões com :nth-of-type em elementos pares

Se em vez de nos referirmos a um elemento específico queremos nos referir a um elemento a cada n elementos, faríamos assim:

#top-menu li:nth-of-type(2n) {
    margin-right: 140px;
}

E o resultado seria aplicar margem ao segundo e quarto elementos:

Crie padrões com :nth-of-type em Odd Elements

Da mesma forma, podemos nos referir aos elementos ímpares da seguinte maneira:

#top-menu li:nth-of-type(2n+1) {
    margin-right: 140px;
}

E o resultado seria:

Adicionar alterações de CSS ao WordPress

Estamos fazendo alterações de CSS no inspetor de elementos. E isso é ótimo para testá-lo, mas assim que atualizarmos a página, as alterações desaparecerão, pois essas alterações não são salvas na web, mas em nosso próprio navegador.

Para adicionar as alterações ao WordPress existem várias maneiras, desde modificar o arquivo CSS do nosso modelo até usar a própria interface do WordPress.

Vamos usar a própria interface do WordPress, para isso vamos ao menu Personalizar -> Adicionar CSS adicional:

Clicamos e chegamos à tela onde temos que adicionar o CSS:

Faixa de bônus: adicione uma pseudoclasse a um elemento filho

Como vimos, essas Pseudo-Classes nos permitem modificar facilmente elementos irmãos, ou seja, elementos que estão no mesmo nível.

Mas vamos imaginar que queremos mudar a cor dos elementos ímpares do nosso cardápio.

A cor não é definida no elemento de lista (li) mas no elemento de ligação (a) que está dentro do elemento de lista:

Se olharmos para o inspetor de elementos:

Se olharmos de perto, veremos que não poderíamos criar o padrão da seguinte maneira:

#top-menu li a:nth-of-type(2n+1) {
    color: red;
}

Como cada link está em um li diferente, todos eles seriam o primeiro elemento e todos mudariam de cor:

O que teríamos que fazer é aplicar o padrão com a pseudoclasse ao elemento li da seguinte forma:

#top-menu li:nth-of-type(2n+1) a {
    color: red;
}

Resultando no que realmente queríamos:

Como vimos, não é o fim do mundo se não tivermos um identificador ou uma classe.

Graças às pseudoclasses podemos acessar quase qualquer elemento do nosso HTML.

Espero que tenham gostado 😉