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.
* {
margin:0;
box-sizing: border-box;
}
h1 {
font-size: 4rem;
}
.title {
font-size: 4rem;
}
#caja1 {
background-color:purple;
}
.container section {
background-color: purple;
}
.container > h1 {
font-sice: 4rem;
}
h1+p {
font-size: 1.3rem;
}
.active ~ li {
color: blue;
}
[href]{
color: blue;
}
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.
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.
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.
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 definidoDigamos que quieres que cada elemento de la página sea naranja, entonces puedes usar un selector universal, así:
* {
color: orange;
}
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.
La sintaxis de un selector de tipo es:
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;
}
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.
La sintaxis de un selector de clase es:
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.
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.
La sintaxis de un selector de ID es:
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á.
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.
La sintaxis de un selector de atributos incluye lo siguiente:
La sintaxis que utilices depende de si deseas seleccionar elementos que tengan un atributo establecido en un valor específico.
Digamos que quieres crear enlaces que incluyan “enlace” en su URL en naranja. entonces puedes utilizar a[href=”enlace”].
a[href*=”enlace”] {
color:orange;
}
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.
La sintaxis de un pseudoselector es:
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;
}
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.
Los juegos gratis de Amazon Prime Gaming representan un atractivo significativo para los suscriptores de…
Si eres un amante de los videojuegos, estás de suerte. Hasta el 20 de noviembre…
La computación cuántica acaba de dar un salto gigante. John M. Martinis, recién galardonado con…
La biografía más vendida del cofundador de Apple, Steve Jobs; escrita por uno de los…
Hubo un tiempo en el que la “seguridad en el hogar” significaba confiar en un…
Elon Musk vuelve a romper todos los esquemas. Los accionistas de Tesla acaban de aprobar…