Selectores disponibles en CSS
Los selectores son básicos pero imprescindibles si quieres dominar las hojas de estilos CSS para darle formato a tus páginas.
El caso es que sin estos conocimientos no vas a poder aplicar reglas de estilos a los elementos de tu página Web.
En este articulo vas a aprender a utilizar los diferentes selectores que se pueden usar en tus hojas de estilo CSS.
No te lo pierdas porque te lo voy a explicar con muchos detalles para que puedas dominarlo al 100%.
Tipos de selectores
Existen diversos tipos de selectores CSS para poder darle propiedades a los elementos que componen una página web.
A continuación, vas a poder verlos todos detalladamente y con ejemplos para que no se te escape nada.
Selector universal
El selector universal permite seleccionar todos los elementos del documento HTML para aplicarle los estilos que tu quieras.
Este selector es muy útil para aplicar unos estilos generales a tu página web.
Yo suelo usarlo al principio del documento como primera regla general.
Por ejemplo, puedes utilizar el selector universal para aplicar una fuente a todo tu documento y/o también suele utilizarse mucho para restablecer o eliminar los márgenes exteriores e interiores de los elementos.
El selector universal se aplica usando el símbolo asterisco de la siguiente forma:
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}El selector universal también se puede aplicar a una parte del documento HTML. Por ejemplo si queremos darle un formato particular a todos los elementos que componen un formulario, puedes hacer lo siguiente:
form * {
display: block;
}En este caso, estoy indicando que quiero que todos los elementos del formulario se comporten como bloques para que ocupen el 100% de la página.
Selector de etiqueta
Un selector de etiqueta te va a permitir seleccionar cualquier elemento de tu documento HTML para darle los estilos que quieras.
Cuando hago referencia a la palabra «etiqueta», hago referencia a las etiquetas HTML como tal.
El caso es que tu puedes seleccionar cualquier elemento mediante su etiqueta para darle estilos personalizados.
Por ejemplo, podemos darle estilos a la etiqueta <h1> que usaré en mi página web para establecer un título.
En tu hoja de estilos CSS puedes darle estilos personalizados a todas las etiquetas <h1> de la siguiente forma:
h1 {
color: #171717;
font-size: 48px;
}De la misma forma, podrías darle estilos a todas las etiquetas HTML existentes: párrafos «<p>», listas «<ul>», contenedores «<div>», etc.
En este punto también me gustaría hacerte saber que en CSS puedes usar una selección compuesta de elementos.
Por ejemplo, para darle estilos a los enlaces del pie de página o <footer>:
footer a {
color: white;
text-decoration: none;
}De esta forma, indicamos que los enlaces del pie de página serán de color blanco y sin decoración.
Esto último va a funcionar siempre y cuando tengas elementos <a> dentro de tu etiqueta <footer>.
Selector de ID
A todos los elementos HTML se le puede establecer o indicar un identificador (que lo ideal es que sea único en la página).
Este tipo de selector se puede usar para aplicar estilos únicos a un elemento sabiendo que en la página hay más elementos como él que pueden tener otro aspecto diferente.
Siguiendo con el ejemplo de los enlaces.
Imagínate que en tu página web hay un botón tipo enlace que quieres destacar para que visualmente se vea como importante.
Todos los enlaces de tu página pueden tener el estilo básico que hemos definido en la sección «Selector de etiqueta» pero ahora a este botón le quieres dar unos estilos bastante personalizados.
En el HTML puedes establecerle un identificador de la siguiente forma:
En tu hoja de estilos CSS puedes aplicarle estilos a este enlace mediante el identificador usando la almoadilla «#»:
#mybutton {
padding: 10px 15px;
background-color: blue;
color: white;
}De esta forma, conseguimos que este enlace personalizado sea diferente y más destacado al resto ya que tendría un aspecto como el siguiente:
Selector de clase
Los selectores de clase son muy parecido a los selectores de ID pero en este caso se suele utilizar para múltiples elementos de la página.
En el HTML puedes agregar una clase a un elemento de la siguiente forma:
En tu hoja de estilos CSS puedes aplicarle estilos a este enlace mediante el identificador usando el punto «.»:
.mybutton {
padding: 10px 15px;
background-color: blue;
color: white;
}A partir de ahora, esta clase se la puedes poner a múltiples elementos de tu documento HTML para que se les aplique los mismos estilos a todos ellos.
Importante: Los identificadores se suelen utilizar para un elemento y las clases para múltiples elementos.
Selector de atributo
Los selectores de atributo te van a permitir seleccionar elementos del HTML en base a un atributo que tengan asignado.
Este tipo de selector suelo utilizarlo mucho con los formularios.
Por ejemplo, para darle un estilo a todos los campos de texto de tipo «input», puedes hacer algo como lo siguiente:
input[type="text"] {
width: 200px;
padding: 10px;
}En este caso, a todos los inputs de tipo texto se le aplicará este ancho de 200px y un espaciado interior de 10px.
Selector de elementos hijos
El ejemplo más claro para aplicar los selectores hijos es usando un elemnto tipo lista <ul> y <li>.
Puedes armar un menú anidado usando una lista desordenada:
Para seleccionar elementos de este menú, tenemos que tener bien claro que se trata de un árbol donde el <ul> es el padre y cada elemento que se va anidando dentro son los hijos.
Para acceder a los hijo puedes usar el símbolo «>».
Por ejemplo, si quieres darle estilos a los enlaces del menú de primer nivel, puedes hacer lo siguiente:
#menu > li > a {
color: red;
}Conclusión
Aplicando todos estos selectores, teniendo los conocimientos básicos de CSS y teniendo una buena imaginación, puedes llegar a crear diseños fabulosos.
Es importante saber que las hojas de estilos se leen de arriba abajo.
Esto significa que la prioridad de las reglas es más importante la última que hayas establecido a no ser que utilices la propiedad !important para indicar que esa regla es la más importante.
a {
color: red !important;
}En CSS también es importante saber que cuanto más especifiques un selector, más importancia tendrá.
Autor
¿Buscas trabajo de programador?
130 artículos que te podrían interesar
Ver más sobre
Deja una respuesta