Selector de clase

Si tenemos varios elementos que deben llevar unas propiedades css similares, en lugar de definir estos estilos varias veces para cada uno de ellos, podemos crear un selector de clase que afecte a cuentos elementos html queramos.

<p>este es el primer parrafo </p>

<pclass="prueba">este es el segundo parrafo</p>

<p>este es el tercer parrafo</p>

logo css

En nuestro fichero html, hemos colocado el class prueba, ahora en nuestra hoja de estilos, vamos a poner como queremos que sea nuestro párrafo con el atributo prueba.

/*selector tipo o etiqueta*/

p{

color:purple;

}

/*nuestro párrafo con atributo class="prueba"*/

.prueba{

background-color:grey;

 

}

El resultado será que el párrafo que tiene la clase "prueba", tendrá el fondo de color gris y la letra de color morado, mientras que los demás párrafos solo tendrán el color morado:

este es el primer párrafo

este es el segundo párrafo

este es el tercer párrafo

El selector .prueba se puede interpretar cuando los elementos de la página tengan el atributo class="prueba". Los selectores de clase son imprescindibles en las páginas Web complejas,  permiten disponer de una precisión total al seleccionar elementos, además de permitir utilizar un mismo estilo para varios elementos diferentes.

<body>

<p>este es el primer parrafo</p>

<p class="prueba">este es el segundo parrafo</p>

<p>este es el <span class="prueba">tercer parrafo</span></p>

</body>

este es el primer parrafo

este es el segundo parrafo

este es el tercer parrafo

logo html 5

Muchas veces, necesitamos restringir el selector de clase, ya que solo queremos por ejemplo que se aplique a una etiqueta específica, eso lo podremos hacer usando, lo siguiente:

span.prueba{

background-color:grey;

}

Ahora solo aquellos elementos span que contengan el atributo class="prueba", se verán con el fondo gris.

este es el primer parrafo

este es el segundo parrafo

este es el tercer parrafo

Es importante que nunca confundamos "span.prueba" con "span, .prueba". ya que aunque el código pueda resultar parecido significan cosas totalmente diferentes, la primera significa todos los elementos span que tengan la clase prueba y el segundo todos los elementos span y todos los elementos .prueba.

También cabe destacar que podemos aplicar a un mismo elemento varias clases, podremos poner en nuestro atributo class más de un valor.

river phoenix programando