Los selectores básicos en CSS son una parte importante en el diseño de tu página web porque determinan a qué elementos y atributos se les aplicará una regla. En este post te explicaremos cuáles son los selectores básicos en CSS y cómo nos facilitan el proceso de estandarizar diseños en una página web.
Los selectores son la primera parte de una regla CSS y determinan a qué se le aplicará dicha regla. Existen cuatro selectores básicos en CSS: el elemento como selector, el selector de ID, el selector de clase y el selector global.
¿Cuáles son los selectores básicos en CSS?
Algunos de los selectores basicos más importantes son:
Elemento como selector
En CSS podemos utilizar todos los elementos como selectores. Al usarlos como selector, le aplicamos la regla que queramos a todos los elementos de ese tipo. Por ejemplo, si ponemos p como selector y luego decidimos que tenga una propiedad de color gris, todos los párrafos en la hoja de estilo serán de color gris.
Selector de ID
El atributo ID se utiliza comúnmente para enlazar dentro de la página web y viajar a un punto concreto de un elemento usando su identificador. Al igual que en el caso del enlace, el atributo ID puede usarse para identificar partes de un elemento. En su rol de selector o # css selector , el atributo ID nos ayuda a aplicar una decisión de estilo a todo elemento que cuente con dicha identificación. Este selector se reconoce por empezar con el símbolo de numeral o hashtag (#).
Selector de clase
El atributo class funciona de manera muy similar al atributo ID. Reconocido por empezar con un punto (.clase), este selector se aplicará a todo elemento que contenga el atributo clase determinado. Basta con que al inicio de la hoja de estilo escribas la regla con tu selector de clase y la verás aplicada a todo elemento con dicho atributo. Esto permite aplicar propiedades a más de un tipo de elemento con un solo selector.
A diferencia del elemento como selector, el selector de clase nos da la posibilidad de tomar decisiones que influencien diferentes elementos. Si queremos por ejemplo que el H1 y los dos párrafos iniciales sean de color rojo, solo tendremos que añadirles el atributo de clase a dichos elementos.
Ten en cuenta que, tanto para el selector de clase como para el selector de ID, debes otorgarle un nombre al identificador y a la clase que te permita reconocer cuál es su propósito.
Selector global
Como su nombre indica, el selector global se trata de un selector que influencia todos los elementos en la hoja de estilo. Este tipo de selector universal puede ser muy útil a la hora de elegir la tipografía general de tu página web, pues con un solo selector puedes cambiar la totalidad de los elementos.
Ten en cuenta que, dependiendo del orden en el que añadas los selectores básicos en CSS, un selector puede reescribir una decisión tomada por otro. Recuerda que el navegador lee las instrucciones de la hoja de estilo de arriba a abajo, lo que quiere decir que tomará lo último que hayas escrito para aplicarlo en la página web. Para saber qué selector tiene prioridad sobre otro, te recomendamos abrir la herramienta de inspector en tu navegador y revisar el user agent style sheet.
Operadores de atributo
Además de los selectores básicos en CSS, este lenguaje tiene una serie de operadores que se pueden aplicar a un atributo o a todo elemento que contenga ese atributo. En CSS existen siete de estos operadores.
- [atributo]: este operador determina que cualquier elemento que contenga el atributo, tenga o no tenga valor, será influenciado por la regla.
- [atributo=”valor”]: este operador determina que solo se les aplicará la propiedad a los atributos con el valor exactamente igual al que esté escrito dentro de la regla.
- [atributo=^]: este operador selecciona a todos los elementos que comiencen con este valor.
- [atributo$=”valor”]: este operador determina que la regla influenciará a todos los elementos que terminen con este valor.
- [atributo*=”valor”]: en este operador o selector * en css no importa si el valor está al inicio, al final o en el medio. Basta con que el valor esté presente para que la regla afecte al elemento.
- [atributo|=”valor”]: este operador determina que cualquier atributo que tenga el valor exacto o el valor seguido de guion (color-black) formará parte del conjunto de elementos al que se le aplican los estilos de la regla.
- [atributo~=”valor”]: este operador determina que, si el atributo tiene una lista de palabras, basta con que una de ellas sea el valor determinado en la regla para que la propiedad se aplique. Esto solo sucederá si las palabras están separadas por un espacio.
Estos son los selectores básicos en CSS, si quieres conocer otros selectores, puedes consultar la página oficial de MDN, que ofrece una descripción más detallada y ejemplos de cada selector.
¿Cuál es el siguiente paso?
Lo principal para afianzar los conocimientos es ponerlos en práctica, por lo que ¡es hora de que utilices los selectores básicos en CSS para crear tu propia página web! Si quieres aprender más acerca de cómo diseñar un sitio web con CSS y HTML, te invitamos a inscribirte en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde crearás un proyecto usando estas y muchas otras herramientas. ¡No te lo pierdas y matricúlate ahora para continuar aprendiendo!
