¿Qué es un selector?
Los selectores ayudan a identificar el elemento html. Cada vez que modificamos el valor de la propiedad de una página html, estos valores deben ser asociados a un selector. Por ejemplo, en el último tutorial hemos visto un ejemplo como este:
p { color: rojo; tamaño de fuente: 16px; }
Aquí p es el selector que selecciona todos los párrafos de una página html. Así que el color y el tamaño de fuente especificado en este selector sólo modificaría estos valores para los párrafos, otros elementos html como los encabezados no reflejarán este cambio ya que hay un selector separado para ellos.
Tipos de selector:
A continuación se muestran los tres selectores más utilizados:
1) Selector de elementos
2) Selector de identificación
3) Selector de clase
1) Selector de elementos:
Este tipo de selector selecciona el elemento basado en el nombre del elemento.
Por ejemplo
p { color: rojo; tamaño de fuente: 16px; } : Selecciona el texto con in
y
tags de una página HTML.
y h1 { color: azul; tamaño de fuente: 20px; } : Selecciona el texto dentro
y
las etiquetas del HTML.
Estos dos son los ejemplos de selectores de elementos. Hay varios otros selectores de elementos aparte de estos y discutiremos cada uno de ellos en los próximos tutoriales.
Ejemplo:
style.css
p{text-align:center;color:red;}h2{ text-align:center; color:blue;}
myhtmlpage.html
<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"></head><body><h2>Hello</h2> <p>Todo párrafo será afectado por el estilo.</p> <p id="para1">Yo también</p> <p>Y yo!</p></body></html>
Salida:
2) Selector de identificación:
Este selector se utiliza para seleccionar un elemento HTML basado en el valor de id.
Por ejemplo:
#mypara { text-align:left; color:black; }
Esta declaración sólo estilizaría los elementos que tienen valor de identificación como «mypara».
Si mi página html tiene dos párrafos como este, entonces el CSS de arriba estilizaría el segundo párrafo solamente. Nota: El segundo párrafo tiene id=»mypara».
<p> Primer Para </p><p id="mypara"> Segundo Para</p><p> Tercer Para</p>
Id es útil cuando se quiere dar diferentes-2 estilos a los mismos elementos HTML. Por ejemplo
#mypara {color:black; }#para2 {color:red; }
Y la página html es:
<p id="mypara"> Segundo para</p><p id="para2"> Tercero para</p>
Salida: El color de la fuente del primer párrafo sería negro y el segundo párrafo tendría color rojo. Esto se debe a que ambos párrafos tienen diferentes valores de id y para cada valor de id tenemos diferentes colores especificados en CSS.
3) Selectores de clase:
Para los selectores de clase especificamos el CSS de la siguiente manera. Es similar al selector id pero la sintaxis es diferente. Estiliza los elementos de la clase especificada.
.abc{text-align:center;color:red;}
Página HTML:
<p class="abc"> Estaré en el centro</p><p> Tendré el estilo por defecto ya que no tengo class</p>
El primer párrafo tendría el estilo definido de css mientras que el segundo tendría el estilo por defecto de los párrafos.
