CSS

- Pseudo-classes do CSS

Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado, como por exemplo :hover.
As pseudo-classes permitem destacar um parágrafo do texto ou alterar o status de um conteúdo.
Sintax:

        seletor:pseudo-classe {
            propriedade: valor;
        }

Principais Pseudo-classes

:first-child: representa qualquer elemento que seja o primeiro filho de seus pais.

        span:first-child {
            background-color: lime;
        }

:hover: tem como efeito, alterar a estilização de um elemento quando o ponteiro do mouse estiver em cima. Geralmente são aplicados em botões, logos, imagens e etc.

        div.menu-bar ul ul {
            display: none;
        }
          
        div.menu-bar li:hover > ul {
            display: block;
        }

:nth-of-type: tem por objetivo permitir que selecionemos um ou mais elementos baseado em uma ordem de origem, através do seu parâmetro. Normalmente usada para tabelas. Ela permite o uso de fómulas.

        /* Parágrafos ímpares */
        p:nth-of-type(2n+1) {
            color: red;
        }

        /* Parágrafos pares */
        p:nth-of-type(2n) {
            color: blue;
        }

        /* Primeiro parágrafo */
        p:nth-of-type(1) {
            font-weight: bold;
        }

        /* Dois primeiros parágrafos */
        p:nth-of-type(-n+2) {
            font-weight: bold;
        }

:nth-last-child: Seleciona tudo que não atende a uma determinada condição. Usando os parâmentros odd e even, ele seleciona apenas os pares (odd) ou ímpares (even) contando a partir do último elemento. Caso a pseudo-classe seja aplica sem a palavra last (:nth-child), a contagem será do primeiro para o último.
```
        p:nth-last-child {
            background-color: #eee;
        }

        p:nth-child {
            background-color: #eee;
        }
    
```

Inputs em Formulários: facilita a comunicação com o usuário durante a utulização de Formulários.
Podemos usar diversas pseudo-classes em formulários:

:disabled: representa qualquer elemento desativado.
:read-only: representa um elemento que não pode ser editado pelo usuário.
:checked: representa um elemento radio, checkbox ou option que está marcada ou alternado para um estado ligado.

        input:disable{
            background:#eee;
            border: 1px solid #222;
            cursor: not-allwed;
        } 
        input: not(:disable){
            background:#eee;
            border: 1px solid #222;
            color:green;
        } /*tudo que não estiver desabilitado*/

        p:read-only {
            background-color: #ccc;
          }

          input:checked + label{
            border: 1px solid blue;
            color: green;
          }

Os pseudo-elementos nos permitem selecionar algumas áreas internas de um elemento HTML e customizá-las através de propriedades.
Selecionar a área que antecede o conteúdo de um elemento adicionando a ela texto ou imagens, ou estilizar apenas a primeira linha de um elemento de texto são apenas algumas das possibilidades criadas por esse recurso.
Sintax:

    [seletor]::pseudo-elemento { 
        propriedade : valor; 
    }

Principais Pseudo-elementos

::first-line: é utilizado quando desejamos customizar o conteúdo apresentado na primeira linha de um elemento.
```
    p::first-line {
        font-size: 16px;
        }
```
::first-letter: nos permite selecionar a primeira letra do conteúdo de um elemento. Caso a primeira letra venha acompanhada do caracter "", ela também será modificada.
```
    p::first-letter {
        color: red;
        font-size: 32px;
    }
```
::before: este seletor cria um falso elemento que nos permite adicionar conteúdo, antes do conteúdo do elemento selecionado (usando a propriedade content ).
```
    div::before {
        content: “pseudo-elemento ::before”;
        color: blue;
    }
```
::after: este pseudo-elemento também cria um falso elemento que nos permite adicionar conteúdo ao elemento selecionado, mas desta vez no final dele.
```
    div::after {
        content: "pseudo-elemento ::after";
        color: red;
    }
    ;
```
::selection: é utilizado para selecionar o conteúdo de um elemento e, a partir disso, customizar algumas propriedades dessa área, como a cor de fundo e do texto.
```
    p::selection {
        color: red;
    }
```

CSS - Cascading Style Sheets

- Pseudo-classes do CSS

Principais Pseudo-classes

Principais Pseudo-elementos