Selectores de CSS
Introducción a los selectores CSS
Los selectores CSS son un concepto básico en el desarrollo web que te permiten apuntar y estilizar elementos HTML específicos en una página web. Son patrones utilizados para seleccionar los elementos que deseas estilizar, basándose en su tipo, clase, ID, atributo o relación con otros elementos.
Los selectores CSS te dan control sobre el estilo de tus páginas web. Con los selectores, puedes aplicar estilos a elementos específicos o grupos de elementos basándote en ciertas condiciones. Esta precisión te permite crear estilos consistentes y mantenibles en todo tu sitio web.
La sintaxis básica de un selector CSS consiste en el nombre del selector seguido de llaves {}. Dentro de las llaves, defines los estilos que quieres aplicar.
Consejo: Seleccionar todos los elementos de párrafo y hacer que su color de texto sea azul
p {
color: blue;
}p es el selector que apunta a todos los elementos <p>, y color: blue; establece el color del texto.
Los selectores CSS pueden ser más complejos que simplemente apuntar a elementos por su nombre de etiqueta. Puedes usar nombres de clase, IDs, atributos y varios otros selectores para apuntar a elementos específicos o grupos de ellos. Las siguientes secciones cubrirán diferentes tipos de selectores CSS y cómo usarlos en tus hojas de estilo.
Tipos de Selectores CSS
CSS ofrece diferentes tipos de selectores que permiten seleccionar elementos según varios criterios.
Selectores de Elemento
Los selectores de elemento seleccionan elementos basados en su nombre de etiqueta. Seleccionan todas las instancias de un elemento HTML específico en una página.
Para usar un selector de elemento, simplemente usa el nombre de la etiqueta sin ningún prefijo.
Consejo: Seleccionar todos los elementos <h1> y hacer su texto rojo
h1 {
color: red;
}Otros ejemplos incluyen p, div, a, img.
Selectores de Clase
Los selectores de clase seleccionan elementos basados en su atributo class. Permiten seleccionar elementos que pertenecen a una clase específica.
Para crear un selector de clase, usa un punto (.) seguido del nombre de la clase.
Consejo: Seleccionar elementos con la clase 'highlight' y darles un fondo amarillo
.highlight {
background-color: yellow;
}Puedes aplicar una clase a un elemento añadiendo el atributo class a la etiqueta HTML:
Consejo: Aplicar una clase a un elemento
<p class="highlight">Este párrafo tendrá un fondo amarillo.</p>Un elemento puede tener múltiples clases separándolas con espacios:
Consejo: Un elemento con múltiples clases
<p class="highlight bold">Este párrafo tendrá un fondo amarillo y texto en negrita.</p>Selectores de ID
Los selectores de ID seleccionan elementos basados en su atributo ID único. Seleccionan un elemento con un ID específico.
Para crear un selector de ID, usa un hash (#) seguido del nombre del ID.
Consejo: Seleccionar el elemento con el ID 'header' y hacer su texto en mayúsculas
#header {
text-transform: uppercase;
}Puedes aplicar un ID a un elemento añadiendo el atributo id a la etiqueta HTML:
Consejo: Aplicar un ID a un elemento
<h1 id="header">Este encabezado estará en mayúsculas.</h1>La diferencia clave entre clases e IDs es que los IDs son únicos y se usan una vez por página, mientras que las clases pueden reutilizarse múltiples veces.
Selectores de Atributo
Los selectores de atributo seleccionan elementos basados en sus atributos o valores de atributos.
Para crear un selector de atributo, usa corchetes ([]) y especifica el nombre del atributo o tanto el nombre como el valor.
Consejo: Seleccionar todos los elementos <a> con el atributo 'target' y hacer su texto en negrita
a[target] {
font-weight: bold;
}También puedes seleccionar elementos basados en el valor:
Consejo: Seleccionar todos los elementos <input> con type='text' y darles bordes
input[type="text"] {
border: 1px solid black;
}Los selectores de atributo proporcionan flexibilidad para seleccionar basándose en atributos.
Selectores Descendientes
Los selectores descendientes seleccionan descendientes de otro elemento.
Para crear este selector, usa un espacio entre los selectores de ancestro y descendiente.
Consejo: Seleccionar todos los <p> dentro de <div>
div p {
font-style: italic;
}Esto selecciona todos los <p> dentro de cualquier nivel de anidamiento dentro de <div>.
Selectores de Hijo
Los selectores de hijo seleccionan hijos directos de otro elemento.
Usa el signo mayor que (>) entre padre e hijo para este selector:
Consejo: Seleccionar hijos directos <li> en <ul>
ul > li {
list-style-type: none;
}La diferencia con el descendiente es que el hijo selecciona solo los hijos inmediatos.
Selector de Hermano Adyacente
El hermano adyacente selecciona hermanos adyacentes que comparten el mismo padre directamente uno al lado del otro usando un signo más (+).
Consejo: Seleccionar el primer <p> inmediatamente después de <h2>
h2 + p {
margin-top: 10px;
}Esto selecciona el primer <p> después de <h2>.
Selector de Hermano General
El hermano general selecciona hermanos que comparten el mismo padre no necesariamente uno al lado del otro usando una tilde (~).
Consejo: Seleccionar todos los <p> hermanos de <h2>
h2 ~ p {
padding-left: 20px;
}Esto selecciona todos los <p> hermanos en cualquier posición relativa a <h2>.
Selector de Pseudo-clase
La pseudo-clase selecciona elementos basados en un estado o condición específica usando dos puntos (:) seguidos del nombre.
Consejo: Cambiar color al pasar el ratón por encima
a:hover {
color: red;
}Otros ejemplos incluyen :active, :focus, :visited, :first-child.
Selector de Pseudo-elemento
El pseudo-elemento permite seleccionar y estilizar partes sin modificar la estructura HTML usando doble dos puntos (::) seguido del nombre.
Consejo: Insertar contenido antes de cada <h1>
h1::before {
content: "→";
}Otros ejemplos incluyen ::after, ::first-letter, ::first-line.
Combinando Selectores
CSS te permite combinar múltiples selectores para crear estilos más específicos. Al usar una combinación de selectores, puedes aplicar estilos a elementos que cumplen con múltiples criterios.
Para combinar selectores, escríbelos uno tras otro sin espacios entre ellos. El orden de los selectores es importante ya que determina la especificidad y cómo se aplicarán los estilos.
Consejo: Seleccionar todos los elementos <p> con la clase 'highlight' dentro de un <div>
div p.highlight {
background-color: yellow;
font-weight: bold;
}Al combinar selectores, es importante entender la especificidad y el orden en cascada. La especificidad determina qué estilos tienen prioridad cuando múltiples selectores apuntan al mismo elemento. Cuanto más específico sea un selector, mayor será su prioridad.
El orden de especificidad de mayor a menor es:
- Estilos en línea (aplicados directamente usando el atributo
style) - Selectores de ID
- Selectores de clase, selectores de atributo y selectores de pseudo-clase
- Selectores de elemento y selectores de pseudo-elemento
Si dos selectores tienen la misma especificidad, el que aparece más tarde en la hoja de estilos tendrá prioridad.
Consejo: Entendiendo la Especificidad
/* Selector de elemento */
p {
color: black;
}
/* Selector de clase */
.highlight {
color: blue;
}
/* Selector de ID */
#special {
color: red;
}<p class="highlight" id="special">Este párrafo tendrá texto rojo.</p>El párrafo tendrá texto rojo porque el selector de ID tiene la mayor especificidad.
Al combinar selectores, mantén tus selecciones lo más simples y específicas posible para mejorar la legibilidad y el mantenimiento de tus hojas de estilo. Evita combinaciones excesivamente complejas o largas a menos que sea necesario.
Consejo: Manteniendo los Selectores Simples y Específicos
/* Evita selectores complejos */
div.container p.highlight span.bold {
font-weight: bold;
}
/* Prefiere selectores más simples y específicos */
.highlight .bold {
font-weight: bold;
}El segundo selector es más simple, lo que lo hace más fácil de entender y mantener.