Selectores CSS

Search…

Selectores CSS

Ya hemos visto los selectores por etiqueta (p.e. table), clase (p.e. .alert) e id (p.e. #alert). Veamos otros selectores.
Lista de selectores
Puedes definir más de un selector en una regla CSS separando los selectores por coma (,). Por ejemplo:
h1, h2, h3 {
  margin-bottom: 21px;
}
Esta regla CSS le aplicaría el margen inferior a las etiquetas h1, h2 y h3.
Más específicos
Podemos ser más específicos mezclando los selector. Por ejemplo, si queremos aplicar un estilos a todos los párrafos que tengan la clase importante utilizaríamos el selector p.importante:
p.importante {
  font-size: 21;
}
Descendientes
Puedes definir selectores que estén dentro de otros selectores.
Por ejemplo, la siguiente regla CSS aplica a las etiquetas span que estén dentro de una etiqueta a con clase link, que a su vez estén dentro de una etiqueta div.
div a.link span {
  color: red;
}
Descendientes directos
Puedes definir selectores que sean hijos directos de otros selectores.
Por ejemplo, la siguiente regla aplica a todos los elementos con clase link que sean hijos directos de una etiqueta div:
div > .link {
  color: red;
}
Cualquier selector
Utiilza el asterísco (*) para referirte a cualquier selector.
Por ejemplo, la siguiente regla aplicaría a todos los elementos de la página:
* {
  box-sizing: border-box;
}
Pseudo clases
Nos permiten seleccionar elementos por su estado actual.
Por ejemplo los vínculos que ya han sido visitados, los checkboxes que están seleccionados, los elementos sobre los que está pasando el mouse, etc.
Por ejemplo, los vínculos pueden estar en varios estados:
/* no visitado */
a:link {
    color: #FF0000;
}
​
/* visitado */
a:visited {
    color: #00FF00;
}
​
/* mouse sobre el vínculo */
a:hover {
    color: #FF00FF;
}
​
/* seleccionado */
a:active {
    color: #0000FF;
}
:first-child y :last-child
Estas dos pseudo clases nos permiten definir el primer y último selector dentro de cualquier elemento.
Por ejemplo, la siguiente regla aplicaría al primer párrafo dentro de cualquier elemento:
p:first-child {
  color: red;
}

Posicionamiento

Bordes, sombras y gradientes

Last modified 4yr ago

Copy link

On this page

Lista de selectores

Más específicos

Descendientes

Descendientes directos

Cualquier selector

Pseudo clases

:first-child y :last-child