La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.
La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.
| Selector | Ejemplo | Tutorial de aprendizaje de CSS |
|---|---|---|
| Selector de tipo | h1 { } |
Los tipos de selectores |
| Selector universal | * { } |
El selector universal |
| Selector de clase | .box { } |
Los selectores de clase |
| Selector de ID | #unique { } |
Los selectores de ID |
| Selector de atributo | a[title] { } |
Los selectores de atributo |
| Pseudoclase | p:first-child { } |
Las pseudoclases |
| Pseudoelemento | p::first-line { } |
Los pseudoelementos |
| Operadores de combinación descendentes | article p |
Operadores de combinación descendentes |
| Operador de combinación de elementos hijo | article > p |
Operadores de combinación de elementos hijo |
| Operador de combinación de elementos hermanos adyacentes | h1 + p |
Hermanos adyacentes |
| Operador de combinación general de elementos hermanos | h1 ~ p |
Hermanos generales |