Los selectores CSS se usan para definir el diseño de los elementos mediante CSS.
Existen muchos tipos diferentes de selectores de CSS cada uno con su propia sintaxis única.
Los selectores se encargan de decir al navegador a qué elementos se deben aplicar los valores indicados en el CSS.
Selectores más importantes
1. Selector universal
* {
margin:0;
box-sizing: border-box;
}
2. Selector de etiqueta
h1 {
font-size: 4rem;
}
3. Selector de clase
.title {
font-size: 4rem;
}
4. Selector de ID
#caja1 {
background-color:purple;
}
5. Selector hijo 1
.container section {
background-color: purple;
}
6. Selector hijo 2
.container > h1 {
font-sice: 4rem;
}
7. Selector hermano adjunto
h1+p {
font-size: 1.3rem;
}
8. Selector hermano general
.active ~ li {
color: blue;
}
9. Selector de atributos
[href]{
color: blue;
}
¿Cómo usar los selectores en CSS?
Existen dos formas principales de usar los selectores en CSS. Si tiene su HTML y CSS en un documento, simplemente tiene que agregar selectores de CSS en la sección “ de su página web.
Verás este método en los ejemplos a continuación.
Sin embargo, también puede mantener su HTML y CSS en documentos separados.
En ese caso, es posible que tengas un documento HTML con la etiqueta index.html y un archivo CSS con la etiqueta style.css.
El archivo index.html debe incluir una línea de código que haga referencia al archivo CSS para que esos estilos se representen en tu página web.
Ese archivo HTML se vería así:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selectores CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>¿Cómo hacer que los selectores de CSS funcionen?</h1>
<body>
</html>
La línea “ es la referencia al archivo CSS.
Ese archivo solo incluiría los bloques de selectores que verás a continuación, conjunto a otros CSS personalizados.
Ahora que ya hemos visto un breve ejemplo de los selectores más importantes y una breve descripción de cómo funcionan, veamos como funciona cada uno de los selectores de forma más detallada.
¿Cómo funciona cada selector CSS?
A continuación, cubriremos los tipos de selectores de CSS principales. Cada uno puede ayudar a seleccionar diferentes grupos de elementos dentro de una página web.
Comenzaremos con el tipo que te ayuda a orientar los grupos de elementos más grandes y luego pasaremos a los tipos de selectores más precisos.
¿Cómo funciona el selector universal?
El asterisco (*) es el selector universal en CSS. Por defecto, el asterisco selecciona todos los elementos de un documento.
Sin embargo, puedes usarlo en combinación con otros espacios de nombres. @namespace es una regla útil en documentos con varios espacios de nombres, como HTML5, SVG en línea, MathML o XML.
Puede usar un espacio de nombres definido para restringir el selector universal a elementos solo dentro de ese espacio de nombres.
Sintaxis del selector universal
Un selector universal puede tener la siguiente sintaxis:
* o *|* + {propiedades de estilo}: coincide con todos los elementosns|* {propiedades de estilo}: coincide con todos los elementos en el espacio de nombres ns|* {propiedades de estilo}: coincide con todos los elementos sin ningún espacio de nombres definido
Ejemplo de selector universal
Digamos que quieres que cada elemento de la página sea naranja, entonces puedes usar un selector universal, así:
* {
color: orange;
}
¿Cómo funciona el selector de tipo?
Un selector de tipo selecciona todos los elementos HTML que tienen un nombre de una etiqueta dada.
Por ejemplo “a” seleccionaría todos los elementos <a> y les aplicaría los valores de propiedad CSS.
“Input” seleccionaría todos los elementos “, “span” todos los elementos <span> y así sucesivamente.
También puedes usar un espacio de nombres definido para restringir el selector de tipo a elementos solo dentro de ese espacio de nombres.
Sintaxis del selector de tipo
La sintaxis de un selector de tipo es:
- elemento de etiqueta {propiedades de estilo}
Ejemplo de selector de tipo
Digamos que mi documento contiene elementos de párrafo y de intervalo y quiero que los elementos de intervalo se resalten en naranja. Usaría:
span {
background-color: orange;
}
¿Cómo funciona el selector de clase?
El selector de clase selecciona todos los elementos que tienen un nombre de clase dado.
Por ejemplo, .intro seleccionaría cualquier elemento que tenga una clase de “intro” al igual que .index seleccionaría cualquier elemento que tenga una clase de “index”.
Si estás utilizando el framework de código abierto Bootstrap CSS, notarás que prácticamente todos los estilos usan clases como selectores.
Sintaxis del selector de clase
La sintaxis de un selector de clase es:
- .nombredeclase {propiedades de estilo}
Ejemplo de selector de clase
Digamos que quiero cambiar todos los elementos con una clase=”ciberninjas” al color naranja.
.ciberninjas {
color: orange
}
Dada esta regla, todos los elementos que incluyan la clase (class=”ciberninjas”) tendrían el color de texto en naranja.
¿Cómo funciona el selector de identificación?
Un selector de ID selecciona un elemento en función de su atributo de ID. Por ejemplo, #toc seleccionará el elemento que tiene el ID “toc”.
Debes tener en cuenta que este selector solo funciona si el valor dado en el selector coincide exactamente con el atributo ID del elemento.
Sintaxis del selector de ID
La sintaxis de un selector de ID es:
- #idname {propiedades de estilo}
Ejemplo de selector de ID
Digamos que quieres cambiar el color y la alineación del elemento con el id “situacion”.
#situacion {
color:orange;
text-align:right;
}
Recuerda que si el atributo ID del elemento está escrito en minúsculas y lo escribes con mayúscula inicial “S” en el selector de CSS, entonces el elemento no se seleccionará.
¿Cómo funciona el selector de atributos?
El selector de atributos selecciona todos los elementos que tienen un atributo determinado o un atributo establecido en un valor específico.
Por ejemplo, a[href] coincidirá con todos los enlaces, mientras que a[href*=”enlace”] solo coincidirá con los enlaces que incluyan “enlace” en su URL.
También puedes utilizar un selector de atributos para aplicar reglas CSS a elementos con el valor dado de un atributo (y no solo la presencia de un atributo).
Entonces, si quieres diseñar cualquier enlace con “enlace” en su URL, puedes utilizar a[href=”enlace”].
Además, se puede usar un espacio de nombres definido para restringir el selector de atributos a elementos solo dentro de ese espacio de nombres.
Sintaxis del selector de atributos
La sintaxis de un selector de atributos incluye lo siguiente:
- [atributo] {propiedades de estilo}
- [atributo=valor] { propiedades de estilo }
- [atributo~=valor] { propiedades de estilo }
- [atributo|=valor] {propiedades de estilo}
- [atributo^=valor] { propiedades de estilo }
- [atributo$=valor] { propiedades de estilo }
- [atributo*=valor] { propiedades de estilo }
La sintaxis que utilices depende de si deseas seleccionar elementos que tengan un atributo establecido en un valor específico.
Ejemplo de selector de atributos
Digamos que quieres crear enlaces que incluyan “enlace” en su URL en naranja. entonces puedes utilizar a[href=”enlace”].
a[href*=”enlace”] {
color:orange;
}
¿Cómo funciona el selector de pseudoclase?
Un selector de pseudoclase aplica CSS a un elemento o elementos seleccionados solo cuando se encuentran en un estado especial.
Por ejemplo, :hover solo dará estilo a un elemento cuando un usuario pase el mouse sobre él.
Otros ejemplos comunes son :active, :visited o :invalid.
Sintaxis del selector de pseudoclase
La sintaxis de un pseudoselector es:
- selector: pseudo-clase {propiedades de estilo}
Ejemplo de selector de pseudoclase
Digamos que quieres cambiar el color de los enlaces que el usuario ya ha visitado a verde; pero quiero mantener los enlaces que el usuario no ha visitado en azul.
Además, quiero que los enlaces cambien a un llamativo color fucsia cuando un usuario pase el cursor sobre ellos.
a:link {
color: #0000FF;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
¿Cómo puiedo agrupar múltiples selectores CSS?
Si tienes varios elementos a los que deseas aplicar un mismo CSS, por ejemplo a un h2 y una clase .espaciado que deseas convertir en verde.
Puedes escribir un código que genere dos reglas separadas, como se muestra a continuación:
h2 {
color: green;
}
.spacious {
color: green;
}
O bien, puedes combinar ambas reglas en una sola generando una lista de selectores.
Para ello solamente tienes que enumerar varios selectores y separarlos con comas antes del corchete que contiene las propiedades de estilo.
Dado que el espacio en blanco es válido antes y después de las comas, puedes agregar un espacio después de cada coma para que el código sea más sencillo de leer.
Por tanto, la sintaxis sería: elemento, elemento, elemento {propiedades de estilo}.
Aquí tienes un ejemplo:
h2, .spacious {
color: green;
}
Aunque también puedes colocar cada selector en su propia línea, si eso hace que puedas leer el código más claro.
En ese caso, la sintaxis se vería así:
h2,
.spacious {
color: green;
}
El combinar los selectores de CSS, va ayudar a reducir el tamaño de las hojas de estilo y hacer que tus página web se carguen más rápido.