Selector de Clase

Que é o selector de clase?

O selector de etiquetas permite seleccionar todos os elementos da páxina que teñan unha mesma etiqueta, pero:

Que pasa se en vez de todas as etiquetas queremos seleccionar unhas poucas?
Que pasa se queremos seleccionar etiquetas distintas para aplicarlle o mesmo estilo?

O selector de clases permite agrupar varias etiquetas (poden ser a mesma ou non) para aplicarlle os mesmos estilos. Non é recomendable a súa utilización, salvo que sexa imprescindible, xa que temos que modificar o html para poder empregalo.

O atributo das etiquetas HTML class permite de agrupar os elementos por clases ou grupos para que así CSS poida seleccionalos e distinguilos dos demais.

Así, nesta táboa resumo o funcionamento dos selectores de clase:

Código a incluír no HTML Código a incluír na regra de estilo CSS

Código a incluír no HTML	Código a incluír na regra de estilo CSS
En calquera etiqueta HTML empregamos o atributo `class` ao que lle asignamos un nome sen espazos nin caracteres especiais. `<etiqueta class="clase">`	Facemos a regra de estilos. O selector e o nome que lle puxemos ao atributo `class` no html precedido dun punto (`.`). Así, se a clase lle pomos "`clase`" o selector será "`.clase`" `.clase { propiedade: valor; }`
Onde, etiqueta: é unha etiqueta calquera de HTML clase: é o nome que lle damos á clase propiedade: valor; : propiedades e valores que desexamos aplicar a regra de estilos

En calquera etiqueta HTML empregamos o atributo class ao que lle asignamos un nome sen espazos nin caracteres especiais.

<etiqueta class="clase">

Facemos a regra de estilos. O selector e o nome que lle puxemos ao atributo class no html precedido dun punto (.). Así, se a clase lle pomos "clase" o selector será ".clase"

.clase {
  propiedade: valor;
}

Onde,

etiqueta: é unha etiqueta calquera de HTML
clase: é o nome que lle damos á clase
propiedade: valor; : propiedades e valores que desexamos aplicar a regra de estilos

Funcionamento

Vamos a ver como se emprega este selector. Así, por exemplo, no HTML podemos ter unha imaxe que pertenza a clase fotos:

<img src="casa.jpg" class="fotos">

Un elemento pode pertencer a varias clases á vez xa que estas non son excluíntes. Para iso especifícase dentro do atributo class os nomes das clases separados por espazos:

<img src="casa.jpg" class="fotos casas">

Tal e como figura na táboa de arriba, unha clase non ten ningún efecto se non pomos a súa regra de estilos, polo tanto, as clases anteriores será posible formatalos mediante unha regra de estilo:

.fotos {border-top: 5px solid #0f0;}

.casas {border-bottom: 10px solid #00f;}

No primeiro exemplo, crearíase un borde superior de 5 pixels e cor verde a todos os elementos (imaxes, parágrafos, etc.) que pertenzan á clase fotos. No segundo, os elementos da clase casas terían un marco inferior de 10 pixels e cor azul; é dicir, chalé. jpg tería borde arriba e abaixo mentres que casa.jpg so arriba (xa que non pertence á clase casas).

A principal característica deste selector é que nunha mesma páxina HTML varios elementos diferentes poden utilizar o mesmo valor no atributo class:

<!doctype html>
<html>
  <head> 
  ...
  </head>
  <body>
      <p class="destacado">Este parágrafo está destacado...</p>
      
      <p>Este parágrafo NON está destacado...</p>
      
      <a href="#" class="destacado">Esta ligazón está destacada...</a>
      
      <p>Este parágrafo NON está destacado <em class="destacado">pero esta parte si</em> </p>
   ....

Selector de Clase

Que é o selector de clase?

Funcionamento

Exemplo...

Retroalimentación