CSS Selectores
CSS (Hojas de Estilo en Cascada) proporciona múltiples selectores para seleccionar los elementos HTML a los que se van a aplicar estilos.
Los selectores CSS son patrones para seleccionar los elementos a los que deseas aplicar estilos.
La columna "CSS" en la siguiente tabla indica las definiciones de propiedades en la versión de CSS. CSS1, CSS2 y CSS3 son diferentes versiones de las Hojas de Estilo en Cascada (Cascading Style Sheets). Cada versión introdujo nuevas características y funcionalidades para mejorar el control y diseño de los estilos de las páginas web.
Selectores CSS comunes
A continuación se presentan algunos selectores CSS comunes:
Selector de elemento (Element Selector):Selecciona elementos HTML por su nombre de etiqueta.
Como el siguiente código,pel selector seleccionará todos los<p>elementos:
p {
color: blue;
}
Selector de clase (Class Selector):Selecciona elementos HTML que tienen una clase específica mediante el nombre de la clase.
El selector de clase comienza con.y va seguido del nombre de la clase.
Como el siguiente código,.highlightel selector seleccionará todos los elementos que tengan la clase"highlight".
.highlight {
background-color: yellow;
}
Selector de ID (ID Selector):Selecciona elementos HTML mediante su identificador único (ID).
El selector de ID comienza con#y va seguido del nombre del ID.
Como el siguiente código,#ejemploel selector seleccionará el elemento con ID"ejemplo".
#ejemplo {
width: 200px;
}
Selector de atributo (Attribute Selector):Selecciona elementos HTML mediante sus atributos. El selector de atributos puede seleccionar según el nombre del atributo y su valor.
Como el siguiente código,input[type="text"]el selector seleccionará todos lostypecuyo atributo sea"text"los elementos <input>.
input[type="text"] {
border: 1px solid gray;
}Selector de descendientes (Descendant Selector):Selecciona elementos HTML mediante la relación de descendencia especificada entre elementos.
El selector de descendientes utiliza espacios para separar los nombres de los elementos.
Como el siguiente código, el selector `div p` seleccionará todos los elementos <p> que estén dentro de un elemento <div>.
div p {
font-weight: bold;
}Para más selectores, consulta la siguiente tabla:
| Selector | Ejemplo | Descripción del ejemplo | CSS |
|---|---|---|---|
| .class | .intro | Selecciona todos los elementos con `class="intro"` | 1 |
| #id | #firstname | Selecciona todos los elementos con `id="firstname"` | 1 |
| * | * | Selecciona todos los elementos | 2 |
| element | p | Selecciona todos los elementos <p> | 1 |
| element,element | div,p | Selecciona todos los elementos <div> y <p> | 1 |
| element.class | p.hometown | Selecciona todos los elementos <p> con `class="hometown"` | 1 |
| element element | div p | Selecciona todos los elementos <p> dentro de un elemento <div> | 1 |
| element>element | div>p | Selecciona todos los elementos <p> cuyo elemento padre es un <div> | 2 |
| element+element | div+p | Selecciona todos los primeros elementos <p> que siguen inmediatamente a un elemento <div> | 2 |
| [attribute] | [target] | Selecciona todos los elementos que tienen el atributo `target` | 2 |
| [attribute=value] | [target=-blank] | Selecciona todos los elementos que usan `target="-blank"` | 2 |
| [attribute~=value] | [title~=flower] | Selecciona todos los elementos cuyo atributo de título contenga la palabra `flower` | 2 |
| [attribute|=language] | [lang|=en] | Selecciona los elementos cuyo atributo `lang` sea igual aen, oen-todos los elementos que comiencen con | 2 |
| :link | a:link | Selecciona todos los enlaces no visitados | 1 |
| :visited | a:visited | Selecciona todos los enlaces visitados | 1 |
| :active | a:active | Selecciona el enlace activo | 1 |
| :hover | a:hover | Selecciona cuando el mouse está sobre el enlace | 1 |
| :focus | input:focus | Selecciona el elemento de entrada que tiene el foco | 2 |
| :first-letter | p:first-letter | Selecciona la primera letra de cada elemento <p> | 1 |
| :first-line | p:first-line | Selecciona la primera línea de cada elemento <p> | 1 |
| :first-child | p:first-child | Especifica el estilo solo cuando el elemento <p> es el primer hijo de su padre. | 2 |
| :before | p:before | Inserta contenido antes de cada elemento <p> | 2 |
| :after | p:after | Inserta contenido después de cada elemento <p> | 2 |
| :lang(language) | p:lang(it) | Selecciona todos los elementos <p> cuyo atributo `lang` tenga un valor inicial igual a `it` | 2 |
| element1~element2 | p~ul | Selecciona cada elemento <ul> que esté después de un elemento <p> | 3 |
| [attribute^=value] | a[src^="https"] | Selecciona cada elemento cuyo atributo `src` tenga un valor que comience con `https` | 3 |
| [attribute$=value] | a[src$=".pdf"] | Selecciona cada elemento cuyo atributo `src` tenga un valor que termine en `.pdf` | 3 |
| [attribute*=value] | a[src*="ejemplo"] | Selecciona cada elemento cuyo atributo `src` tenga un valor que contenga la subcadena `ejemplo` | 3 |
| :first-of-type | p:first-of-type | Selecciona cada elemento <p> que sea el primer elemento <p> de su padre | 3 |
| :last-of-type | p:last-of-type | Selecciona cada elemento <p> que sea el último elemento <p> de su padre | 3 |
| :only-of-type | p:only-of-type | Selecciona cada elemento <p> que sea el único elemento <p> de su padre | 3 |
| :only-child | p:only-child | Selecciona cada elemento <p> que sea el único hijo de su padre | 3 |
| :nth-child(n) | p:nth-child(2) | Selecciona cada elemento <p> que sea el segundo hijo de su padre | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Selecciona cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre, contando desde el último hijo | 3 |
| :last-child | p:last-child | Selecciona cada elemento <p> que sea el último hijo de su padre. | 3 |
| :root | :root | Selecciona el elemento raíz del documento | 3 |
| :empty | p:empty | Selecciona cada elemento <p> que no tenga ningún hijo (incluidos los nodos de texto) | 3 |
| :target | #news:target | Selecciona el elemento #news actualmente activo (el URL que contiene el nombre de ese ancla) | 3 |
| :enabled | input:enabled | Selecciona cada elemento de entrada habilitado | 3 |
| :disabled | input:disabled | Selecciona cada elemento de entrada deshabilitado | 3 |
| :checked | input:checked | Selecciona cada elemento de entrada seleccionado | 3 |
| :not(selector) | :not(p) | Selecciona cada elemento que no sea un elemento <p> | 3 |
| ::selection | ::selection | Hace coincidir la parte de un elemento que el usuario ha seleccionado o que está resaltada | 3 |
| :out-of-range | :out-of-range | Hace coincidir los elementos `input` cuyo valor está fuera del rango especificado | 3 |
| :in-range | :in-range | Hace coincidir los elementos `input` cuyo valor está dentro del rango especificado | 3 |
| :read-write | :read-write | Se utiliza para hacer coincidir elementos legibles y editables | 3 |
| :read-only | :read-only | Se utiliza para hacer coincidir elementos que tienen el atributo `readonly` (solo lectura) | 3 |
| :optional | :optional | Se utiliza para hacer coincidir elementos de entrada opcionales | 3 |
| :required | :required | Se utiliza para hacer coincidir elementos que tienen el atributo `required` | 3 |
| :valid | :valid | Se utiliza para hacer coincidir elementos cuyo valor de entrada es válido | 3 |
| :invalid | :invalid | Se utiliza para hacer coincidir elementos cuyo valor de entrada es inválido | 3 |
| :has | :has | Permite seleccionar un elemento basándose en sus elementos descendientes. | 3 |
| :is | :is | Recibe cualquier cantidad de selectores como parámetros y devuelve la unión de los elementos que coinciden con esos selectores. | 3 |