Blog
Falta poco para finalizar el curso básico de CSS y HTML. Y ciertamente es importante resaltar que los Selectores en CSS, son una herramienta que te facilitará mucho la selección de elementos en el código HTML para manipular sus estilos entre otros componentes. Sigue leyendo para que entiendas mejor de lo que te estoy hablando. Sigamos con la lección.
¿Qué es un selector en CSS?
Los selectores en CSS son extremadamente útiles para definir una consulta a un subconjunto de los elementos contenidos en una página web. La consulta nos permite hacer una de dos cosas: podemos declarar un estilo para aplicar al conjunto de elementos en una hoja de estilo CSS; o podemos recibir una lista de elementos HTML de forma programática de acuerdo a la consulta, utilizando el método querySelector.
Selector universal
El selector universal es utilizado para seleccionar todos y cada uno de los elementos de tu página web. Te muestro en el siguiente ejemplo como se elimina el margen y el relleno de todos los elementos en la página HTML utilizando el selector universal para lograrlo.
* {
margin: 0;
padding: 0;
}
El selector universal se define mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Selector de etiquetas
Aquí te muestro un ejemplo del párrafo que acabas de leer: si nosotros quisiéramos colorear todos los párrafos contenidos en etiquetas <p>; entonces en el documento de HTML que estemos utilizando usamos el selector “p” y le añadimos el color blue de la siguiente manera:
<html>
<title>ejemplo</title>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>
Yo soy azul
</p>
<p class="example">
Yo también soy azul
</p>
<p id="last" class="example">
Yo también estoy azul.
</p>
</body>
</html>
El selector de CSS “p” seleccionará todos los elementos o etiquetas <p> de nuestro código HTML; por esto a este recurso se le conoce como “selector” o “selectores”.
Podemos añadir restricciones a la consulta y aplicar un estilo de CSS diferente a algunos elementos utilizando un selector más específico.
Esto lo haremos creando una clase; por consiguiente, coloreamos todos los elementos “p” que tienen la clase “ejemplo” con color verde, o como su nombre en inglés: green.
Puedes notar que en este ejemplo, el orden que le damos a las definiciones de las clases y de los selectores en CSS no importa ya; que el segundo selector que creamos es más específico que el primero que utilizamos. Por lo tanto invalidará la definición de CSS menos específica, o tendrá “menor” importancia.
Nota: Ten en cuenta que CSS trae varios selectores predefinidos; tales como los elementos <p>,<h1> … <h6>, <header>, <body>, <footer>, <ul>, <ol>, <li>, <image>, <section>, <article>, entre otras. Esto es para que no estés declarando clases a elementos que se utilizan comúnmente en páginas web.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<style>
p.example {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>
Yo soy azul.
</p>
<p class="example">
Ahora soy verde.
</p>
<p id="last" class="example">
Ahora nuevamente soy azul.
</p>
</body>
</html>
En el siguiente ejemplo repetiremos el proceso anterior; sin embargo, esta vez añadiendo un selector de ID en lugar del selector de clase que veníamos usando.
<!DOCTYPE html>
<html>
<head>
<title>
<style>
p#last {
color: red;
}
p.example{
color: green;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>
Yo soy azul
</p>
<p class="example">
Ahora soy verde
</p>
<p id="last" class="example">
Y ahora soy de color rojo.
</p>
</body>
</html>
Podemos añadirle un mismo conjunto de estilos a diferentes selectores al mismo tiempo, si es que estos están separados por comas entre cada uno de ellos. Esto aplicará el mismo bloque de estilo a un número de elementos diferentes. En el siguiente ejemplo lograremos que el contenido de las etiquetas <h1>, <h2> y <h3>, se muestre de color azul; y que en cambio, el contenido de las etiquetas <h4>, <h5> y <h6> se muestren de color rojo. Observa el código del ejemplo para que notes como se usan las comas para separar cada uno de los elementos:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
color: blue;
}
h4, h5, h6{
color: red;
}
</style>
</head>
<body>
<h1>
Encabezado h1
</h1>
<h2>
Encabezado h2
</h2>
<h3>
Encabezado h3
</h3>
<h4>
Encabezado h4
</h4>
<h5>
Encabezado h5
</h5>
<h6>
Encabezado h6
</h6>
</body>
</html>
Selectores de hijos
Un selector de elementos secundarios coincide cuando un elemento es hijo de algún elemento. Un selector de hijos se compone de dos o más selectores separados por “>”.
Además de especificar un tipo de elemento, un ID y/o un nombre de clase; también podemos crear selectores que seleccionan un hijo específico sólo si está contenido en una jerarquía específica. Por ejemplo, digamos que queremos colorear todas las etiquetas <strong> en cualquier párrafo que tenga la clase “strongblue“.
<!DOCTYPE html>
<html>
<head>
<style>
.strongblue strong {
color: blue;
}
</style>
</head>
<body>
<p>
Esta es la <strong>primera</strong>oracion.
</p>
<p class="strongblue">
Esta es la <strong>segunda</strong>oracion.
</p>
</body>
</html>
En el lenguaje de estilos CSS existen dos tipos de selectores de hijos:
Un selector de padre como este. Si el selector le otorga el estilo a un elemento padre, este le transferirá indirectamente los atributos que se le hayan dado a sus elementos hijos, dentro del código que estemos escribiendo. Lo que quiere decir que los estilos de los elementos padre seleccionados afectaran el estilo o contenido de sus propios elementos hijo. Y también tenemos a los selectores de hijos directos, que sólo selecciona el primer nivel de jerarquía del elemento padre que fue seleccionado. Aquí está el mismo código pero con un selector hijo directo:
<!DOCTYPE html>
<html>
<head>
<style>
.strongblue > strong {
color: blue;
}
</style>
</head>
<body>
<p>
Esta es la <strong>primera</strong>oracion.
</p>
<p class="strongblue">
Esta es la <strong>segunda</strong>oracion.
</p>
</body>
</html>
Si el elemento o etiqueta <strong> hubiese sido encapsulada dentro de un enlace, entonces este selector no funcionaría ya que se basa en una relación directa padre-hijo entre .strongblue y el elemento <strong>.
Métodos querySelector y querySelectorAll
El lenguaje HTML, en su versión número 5, introdujo los nuevos métodos document.querySelector, y el método document.querySelectorAll. Los cuales nos permiten ejecutar los mismos selectores y recibir el primer elemento que corresponde al selector, o una lista de elementos, dependiendo del método que utilicemos.
El método querySelector () devuelve el primer elemento que coincide con un selector de CSS especificado en el documento.
El método querySelectorAll () devuelve todos los elementos en el documento que coinciden con un selector de CSS especificado, como un objeto NodeList estático. (Un objeto NodeList es una lista ( o colección) de nodos extraídos de un documento.).
El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.
Consejo: Puedes utilizar la propiedad de longitud del objeto NodeList para determinar la cantidad de elementos que coinciden con el selector especificado anteriormente, y luego puede recorrer todos los elementos y extraer la información que desee.
Veamos un ejemplo de estos métodos:
<p class="nice">
Este es un parrafo con el atributo nice.
</p>
<p class="nice">
Este es otro parrafo con el atributo nice.
</p>
<p>
Y este es un parrafo estandar.
</p>
<script>
// Este código colorea el primer párrafo en azul
var firstNiceParagraph = document.querySelector(".nice");
firstNiceParagraph.style.color = "blue";
</script>
Te felicito por emprender tu camino para ser un gran desarrollador web. Te recomendamos entrar a nuestro curso para obtener un aprendizaje mucho más completo:
[…] Selectores en CSS […]