CSS - Selectores en CSS - Selector de ID - Selector de Clases - Selector Etiqueta - Selector Universal.

Hola amigos, continuando con nuestro pequeño y rapido curso de css, hoy vamos a ver los diferentes tipos de selectores (selectores en CSS, selector de id, clases,  etiqueta  y el universal), si por el momento no saben como importar hojas de estilos por favor primero pasa por acá!.

CSS - Selectores en CSS

Un selector no es mas ni menos que una anotación que nos permite seleccionar uno o varios elementos html, a los cuales los podemos poner diferentes reglas de estilos y comportamientos (mucho mas adelante hablaremos de los comportamientos).

CSS - Selector de ID

Un selector de Id es uno de los mas importantes, el segundo en orden de jerarquía en el caso que existan varios selectores. Cuando nos referimos a ID, nos referimos a la propiedad que tienen los elementos html llamada id. 

Recordar que el id debe ser unico en todo el documento html (es decir que no tiene que haber mas de un elemento con ese id en toda la pagina) ya que sirve para identificar los elementos en forma unica. (Pongamos por ejemplo un salon de clases si tenemos dos alumnos llamado Pepe, cuando decimos Pepe tiene 3 como lo identificaríamos?? a que Pepe le pusimos el 3?)

Dentro de nuestra plantilla de estilos se define con # (numeral) y luego el nombre del id.

Habiendo explicado esto vamos a  poner un ejemplo:

#parrafoUno{color: blue;}

Y en el html ponemos el id que pusimos, en nuestro caso parrafoUno

<p id="parrafoUno"> Parrafo de color azul </p>

En el html lo importante en este caso es la propiedad id.

CSS - Selector de Clases

Un selector de clases sirve para agrupar varios elementos y asignarles los estilos, no hace falta que tengamos elementos iguales, es decir puede ser una etiqueta input y un div y ambos asignarles el color de letra rojo por ejemplo.

La forma de declararlo dentro de la hoja de estilo es . (punto) + nombre de la clase que queremos. Y en nuestro html el atributo class.

Ejemplo:

.parrafoUno{color: red;}

En principio esto es muy parecido a nuestro ejemplo de Id pero la usando . (punto).

Y en el html ponemos la clase que creamos a nuestros elementos.

<p  class="parrafoUno"> Parrafo de color azul </p>

<div class="parraforUno></div> 

En el html lo importante en este caso es la propiedad class.

CSS - Selector de etiquetas

Los selectores de etiqueta son muy sencillos no se agrega nada adelante si no que solo va el nombre de la etiqueta y listo, hasta no hace falta tocar nada del html, lo malo es que modifica todas las etiquetas que elegimos, que usen la hojas de estilos.

Ejemplo:

p{color: red;}

CSS - Selector Universal

El selector universal básicamente sirve para seleccionar todos los elementos de una pagina web y asignarles a todos los mismos estilos, para esto se utiliza el *.

Ejemplo:

*{color: red;}

Con esto asignamos a todas los elementos del html que importan la hoja de estilo el mismo color. Si bien estoy es re facil, no se suele usar que no siempre se utiliza los mismos estilos para todo.

Bueno amigos si tienen alguna duda por favor no duden en escribir saludos hasta la próxima!