Seletores Básicos

4.1 Seletores por tipo

Os seletores em CSS são usados para definir quais elementos terão estilos aplicados. Os seletores principais incluem seletores por tipo, classe, identificador e seletores universais. Cada um desses seletores tem suas próprias características e aplicações.

Seletores por tipo (Type Selectors)

Os seletores por tipo aplicam estilos a todos os elementos de um determinado tipo. Por exemplo, você pode aplicar estilos a todos os parágrafos (<p>), cabeçalhos (<h1>, <h2> etc.) ou outras tags HTML.

    
      tagname {
        propriedade: valor;
        propriedade: valor;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Esse seletor aplicará estilos a todos os elementos <p> no documento.

Características:

• Aplica-se a todos os elementos do tipo especificado
• Útil para estilos globais que devem ser aplicados a todos os elementos de um determinado tipo

4.2 Seletores por classe

Seletores por classe permitem aplicar estilos a um ou mais elementos que têm uma determinada classe. As classes são definidas usando o atributo class em HTML e são indicadas por um ponto (.) em CSS.

Sintaxe:

    
      .classname {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Esse seletor aplicará estilos a todos os elementos que têm a classe button.

Características:

• Pode-se usar a mesma classe para vários elementos
• Permite aplicar facilmente os mesmos estilos a elementos diferentes

4.3 Seletores por identificador

Seletores por identificador aplicam estilos a um elemento com um identificador único. Os identificadores são definidos usando o atributo id em HTML e são indicados pelo símbolo de hash (#) em CSS.

Sintaxe:

    
      #uniq-id {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

Esse seletor aplicará estilos ao elemento com o identificador main.

    
      /* Seleciona o elemento com o identificador #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Este elemento terá largura de 800px.</div>
      <div>Este elemento não será estilizado.</div>
    
  

Características:

• O identificador deve ser único na página
• Usado para estilizar elementos únicos, como cabeçalhos ou conteúdo principal

4.4 Seletores em grupo

Seletores em grupo permitem aplicar a mesma regra a vários elementos. Eles reduzem a quantidade de código e facilitam a administração de estilos.

Sintaxe:

    
      seletor, seletor, … {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

    
      /* Seleciona todos os elementos h1, h2 e h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Título 1</h1>
      <h2>Título 2</h2>
      <h3>Título 3</h3>
      <p>Este texto não será estilizado por esta regra.</p>
    
  

4.5 Seletores universais

Seletores universais aplicam estilos a todos os elementos na página. Eles são indicados por um asterisco (*) e podem ser úteis para redefinir estilos ou para aplicar estilos gerais a todos os elementos.

Sintaxe:

    
      * {
        propriedade: valor;
        propriedade: valor;
      }
    
  

Exemplo:

Esse seletor aplicará estilos a todos os elementos na página, redefinindo suas margens e estabelecendo o modelo de caixa.

    
      <div>Parágrafo 1</div>
      <div>Parágrafo 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Características:

• Aplica-se a todos os elementos na página
• Útil para redefinir estilos globais ou aplicar estilos básicos a todos os elementos