Selectores Avançados JAVASCRIPT

  Seletores avançados no CSS permitem que você selecione elementos de maneiras mais específicas e complexas. Alguns exemplos incluem:



  1. Seletores de Atributo:

    • elemento[atributo]: Seleciona elementos com um atributo específico.
    • elemento[atributo="valor"]: Seleciona elementos com um atributo específico e valor correspondente.

  2. Seletores de Pseudo-classes:

    • :hover: Seleciona elementos quando o cursor está sobre eles.
    • :nth-child(n): Seleciona o enésimo filho de seu elemento pai.

  3. Seletores de Pseudo-elementos:

    • ::before e ::after: Adiciona conteúdo antes ou depois do conteúdo real do elemento.

  4. Seletores de Descendência:

    • elemento pai > elemento filho: Seleciona elementos filhos diretos de um elemento pai.

  5. Seletores Adjacentes:

    • elemento + irmão: Seleciona o elemento irmão imediatamente após o elemento especificado.

  6. Seletores de Negação:

    • :not(seletor): Seleciona elementos que não correspondem ao seletor especificado.

    • Certamente, vou fornecer mais exemplos de seletores avançados em CSS:

      Seletores de Atributo com Prefixo ou Sufixo:

        • elemento[atributo^="valor"]: Seleciona elementos com um atributo cujo valor começa com o especificado.
        • elemento[atributo$="valor"]: Seleciona elementos com um atributo cujo valor termina com o especificado.

        Exemplo:

        css
        input[type^="text"] { /* Estiliza inputs com type começando com "text" */ border: 1pxsolid #ccc; }

      2. Seletores de Atributo com Substring:

        • elemento[atributo*="valor"]: Seleciona elementos com um atributo cujo valor contém a substring especificada.

        Exemplo:

        css
        a[href*="example"] { /* Estiliza links com href contendo "example" */ color: blue; }

      3. Seletores de Pseudo-classes Dinâmicos:

        • :focus: Seleciona elementos que estão com foco.
        • :checked: Seleciona elementos de input que estão marcados (checkboxes ou radio buttons).

        Exemplo:

        css
        input:focus { /* Estiliza o input quando está em foco */ outline: 2px solid #4CAF50; }

      4. Seletores de Pseudo-elementos ::first-child e ::last-child:

      • elemento:first-child: Seleciona o primeiro filho de seu elemento pai.
      • elemento:last-child: Seleciona o último filho de seu elemento pai.

      Exemplo:

      css
      li:first-child { /* Estiliza o primeiro item de uma lista não ordenada */ font-weight: bold; }

      Esses são alguns exemplos adicionais de como os seletores avançados em CSS podem ser utilizados para aplicar estilos de forma mais específica em diferentes elementos da sua página web.

      1. Seletores de Filhos Ímpares/Pares:
      • elemento:nth-child(odd): Seleciona filhos ímpares de seu elemento pai.
      • elemento:nth-child(even): Seleciona filhos pares de seu elemento pai.

      Exemplo:

      css
      tr:nth-child(even) { /* Estiliza linhas pares em uma tabela */ background-color: #f2f2f2; }
      1. Seletores de Grupos:
      • seletor, seletor: Permite aplicar as regras CSS a múltiplos seletores.

      Exemplo:

      css
      h2, p { /* Estiliza todos os elementos <h2> e <p> */ color: #333; }
      1. Seletores Aninhados:
      • elemento pai elemento filho: Seleciona um elemento filho que é um descendente direto de um elemento pai.

      Exemplo:

      css
      nav ul { /* Estiliza listas não ordenadas dentro de elementos <nav> */ list-style-type: none; }
      1. Seletores de Visibilidade:
      • :visible e :hidden: Seleciona elementos visíveis ou ocultos.

      Exemplo:

      css
      .mensagem-erro:visible { /* Estiliza mensagens de erro visíveis */ color: red; }
      1. Seletores de Negociação Avançados:
      • :not(seletor): Permite negar a aplicação de estilos a elementos específicos.

      Exemplo:

      css
      li:not(.destaque) { /* Estiliza itens de lista que não têm a classe "destaque" */opacity: 0.7; }

      Estes são exemplos adicionais de como os seletores avançados em CSS oferecem flexibilidade para direcionar estilos a elementos específicos em uma página web.

  1. Seletores de Localização:
  • :first-of-type e :last-of-type: Seleciona o primeiro e último elemento do tipo específico entre os filhos diretos de seu elemento pai.

Exemplo:

css
article p:first-of-type { /* Estiliza o primeiro parágrafo dentro de cada elemento <article> */ font-style: italic; }
  1. Seletores de Estado do Link:
  • :link, :visited: Aplica estilos a links não visitados e visitados, respectivamente.

Exemplo:

css
a:visited { /* Estiliza links já visitados */ color: #800080; }
  1. Seletores de Foco e Ativação:
  • :focus-within: Seleciona um elemento quando qualquer um de seus descendentes recebe foco.
  • :active: Seleciona um elemento enquanto está sendo clicado.

Exemplo:

css
button:focus-within { /* Estiliza o botão quando qualquer elemento dentro dele recebe foco */ border: 2px solid #008CBA; }
  1. Seletores de Atributo Baseados em Prefixo:
  • [atributo^="prefixo"]: Seleciona elementos com atributos que começam com um determinado prefixo.

Exemplo:

css
[class^="icon-"] { /* Estiliza elementos com classes que começam com "icon-" */ font-size: 24px; }

Estes exemplos adicionais destacam a diversidade e a utilidade dos seletores avançados em CSS para aplicar estilos de forma mais granular em diferentes situações e elementos de uma página web.

  1. Seletores de Atributo com Operadores de Correspondência:
  • [atributo*="valor"]: Seleciona elementos com um atributo que contenha uma correspondência parcial com o valor especificado.
  • [atributo~="valor"]: Seleciona elementos com um atributo que contenha uma palavra exata.

Exemplo:

css
[title*="tutorial"] { /* Estiliza elementos com o atributo title contendo "tutorial" */color: #009688; }
  1. Seletores de Estado :enabled e :disabled:
  • :enabled: Seleciona elementos habilitados.
  • :disabled: Seleciona elementos desabilitados.

Exemplo:

css
input:disabled { /* Estiliza inputs desabilitados */ opacity: 0.5; }
  1. Seletores de Linguagem :lang:
  • :lang(idioma): Seleciona elementos com a linguagem especificada.

Exemplo:

css
p:lang(fr) { /* Estiliza parágrafos em francês */ font-style: italic; }
  1. Seletores de Filhos Aninhados:
  • elemento pai > elemento filho sub-filho: Seleciona elementos sub-filhos que são filhos diretos de um elemento filho, que por sua vez é filho direto do elemento pai.

Exemplo:

css
article > section > p { /* Estiliza parágrafos dentro de uma seção que está dentro de um artigo */ margin-bottom: 10px; }

Estes exemplos adicionais demonstram como os seletores avançados em CSS oferecem flexibilidade para aplicar estilos com base em diferentes condições e estruturas HTML.

  1. Seletores de Negociação com Múltiplos Seletores:
  • seletor1 seletor2: Permite estilizar elementos que são filhos de seletor1 e também correspondem a seletor2.

Exemplo:

css
article p, aside p { /* Estiliza parágrafos dentro de elementos <article> e <aside> */font-size: 16px; }
  1. Seletores de Tamanho (:empty):
  • :empty: Seleciona elementos que não possuem filhos, incluindo espaços em branco e comentários.

Exemplo:

css
li:empty { /* Estiliza itens de lista vazios */ list-style: none; }
  1. Seletores de Primeira Linha e Última Linha (::first-line e ::last-line):
  • ::first-line: Seleciona a primeira linha de um bloco de texto.
  • ::last-line: Seleciona a última linha de um bloco de texto.

Exemplo:

css
p::first-line { /* Estiliza a primeira linha de todos os parágrafos */ font-weight: bold; }
  1. Seletores :target:
  • :target: Seleciona o elemento alvo de um link interno.

Exemplo:

css
section:target { /* Estiliza a seção alvo de um link interno */ background-color: #ffd700; }
  1. Seletores :nth-last-child:
  • :nth-last-child(n): Seleciona o enésimo filho de seu elemento pai, contando a partir do final.

Exemplo:

css
li:nth-last-child(2) { /* Estiliza o segundo item de lista a partir do final */ color: #333; }

Esses exemplos adicionais fornecem uma visão mais abrangente dos seletores avançados em CSS e como eles podem ser combinados para atender a diversas necessidades de estilização em uma página web.

Next Post Previous Post