Selectores básicos CSS

Uno de los  principales conceptos  a entender en CSS es sobre los selectores ¿Qué cosa son los selectores en CSS?
Los selectores son la parte medular en una hoja de estilos, ya que mediante ellos es como se seleccionan los elementos a los cuales se les va a aplicar los estilos contenidos en una regla CSS.

Veamos algunos selectores básicos.

Selector ID

Este selector es empleado cuando quiere aplicarse estilo a un elemento único, por lo cúal dos o mas elementos no pueden ser identificados con el mismo ID. Dentro de CSS se le antepone el simbolo (#) al nombre con el que se va a identificar el elemento.
Veamos el CSS...


	#parrafo{
		color:#eee;
		font-size:16px;	
	}

En el HTML se emplea el atributo id...


	<div>
		<p id="parrafo">Este es mi parrafo</p>
	</div>

Selector de clase

Selecciona de entre los elementos html a los elementos marcados dentro del atributo class con el nombre dado en el selector css. En CSS para emplear este selector se antepone el nombre con un punto (.) como en el siguiente ejemplo.
Selecciona de entre los elementos html a los elementos marcados dentro del atributo class con el nombre dado en el selector css. En CSS para emplear este selector se antepone el nombre con un punto (.) como en el siguiente ejemplo.


	.texto-alerta{
		color:red;
		font-weight:bolder;
	}

Ahora HTML...


	<div>
		<span class='texto-alerta'>Este es mi parrafo</span>
	</div>

Nota: es posible agregar a un elemento HTML dos o mas clases para ello unicamente hay que dejar un espacio en blanco entre ellas.


	<div>
		<span class='texto-alerta text-center'>Este es mi parrafo</span>
	</div>

Selector etiqueta

Selecciona y aplica las reglas CSS únicamente a los elementos marcados por este selector...


	div {
		color:red;
		background-color:white;
	}

El fragmento de código anterior seleccionará todos los elementos que sean div y les aplicara las propiedades especificadas.

Selector universal

El selector universal es empleado para seleccionar a todos los elementos del documento html, se emplea el signo (*) para ello.


	* {
		margin:0;
		padding:0;
	}

Estos no son los únicos selectores que existen, pero si los mas básicos. Ya que la lista de selectores es extensa en otras entradas continuaremos viendo algunos mas.