SELECTORES
DE CSS
SELECTORES DE CSS
Temario:
Selectores de etiquetas, clases y ID
Selectores simples y compuestos
Especificidad
Pseudoclases
SELECTORES EN CSS
Los selectores indican a qué elementos HTML aplicar los estilos. Los
selectores que veremos en esta clase son:
• Selector simple y ID
• Selectores de clases y especificidad
• Selectores compuestos
• Selectores de atributos
• Pseudoclases
• Pseudoclases en formularios
• Pseudoclases Child
• Pseudoclases Type
SELECTORES SIMPLES
Los selectores simples son formados por una sola palabra y tenemos
los siguientes:
1. Selectores de tipo (ETIQUETA)
Se aplican a elementos HTML (tags). Basta indicar el nombre de la
etiqueta.
SELECTORES SIMPLES
2. Selectores de ID
Los selectores de id permiten asignar un estilo al elemento que tiene como
atributo un id.
Se selecciona un id con el simbolo # seguido del nombre del id. Puesto que los
id son unicos en html, no es recomendable usar id en el css.
SELECTORES SIMPLES
3. Selectores de Clases (Recomendado)
Los selectores de clase permiten asignar un estilo a los elementos que tiene
como atributo un class=“”.
Las clases son atributos de html que se indican con class="“. Estas clases se
usan para manipular el html con CSS o JS.
Para seleccionar una clase con CSS se utiliza un punto seguido del nombre de la
clase.
ESPECIFICIDAD
La especificidad es un algoritmo de CSS por el cual se resuelven los conflictos
de estilos.
Especificidad es un valor que adquieren los selectores y que determina que
regla CSS (o que estilos) se aplican a un elemento cuando existen conflictos.
type 1
class 10
id 100
inline 1000
!important gana a todos
SELECTORES COMPUESTOS
Los selectores compuestos son formados por mas de una palabra y tenemos los
siguientes:
1. Selectores Descendientes: Se aplican a un elemento siempre que sea hijo
de otro. Su sintaxis es:
ancestro descendiente {
}
* No importa el nivel del descendiente.
* Siempre se debe intentar descender lo menos posible
SELECTORES COMPUESTOS
2. Selector de Hijo Directo: Selecciona solo a los elementos que están dentro
directamente de otro elemento
padre > hijo {
}
3. Selectores hermanos: Tenemos dos tipos:
• Hermano siguiente (adyacente):
b está justo después de a. Se selecciona b
• Hermanos siguientes (plural):
b (o varios b) están después de a, no importa si entre ellos hay otros
elementos. Se selecciona a todos los b.
SELECTORES COMPUESTOS
4. Combinar Selectores: Es posible combinar selectores de la siguiente
manera:
5. Anidad Selectores: Consiste en separar selectores por comas. De esta
manera los estilos se aplican a todos los selectores.
SELECTORES COMPUESTOS
6. Selectores de Atributos: Usan corchetes [] para indicar el atributo.
Se puede indicar solo el atributo o el atributo y su valor:
SELECTORES COMPUESTOS
6. Selectores de Atributos:
Los selectores de atributos aceptan comodines:
^ -> comienza con
* -> contiene a
$ -> termina con
PSEUDO CLASES
Son selectores dinámicos, que responden al contexto, a la interacción del
usuario o a algunas propiedades de los elementos. Se indican con dos puntos
(:)
Los más usuales y para que elementos se usan se muestran a continuación:
• Para los enlaces (etiqueta <a></a>)
:hover Cuando se pasa el cursor por encima del elemento
: active Cuando se hace clic (fracción de segundo)
:visited Un enlace al que ya se visitó
:target Selecciona el destino de un enlace interno
PSEUDO CLASES
:empty Selecciona elementos vacíos
:not() selecciona a los elementos que no coincidan con el selector pasado
como parámetro
• Pseudoclases de formularios
:focus Un campo de formulario seleccionado
:disabled Cuando un campo está desactivado
:checked Cuando un botón radio ha sido seleccionado
:required Cuando un elemento es obligatorio
:optional Cuando no es obligatorio
:valid, :invalid Similar a los dos anteriores
PSEUDO CLASES
PSEUDOCLASES CHILD y TYPE
:first-child
:last-child
seleccionan al primer y ultimo hijo de un elemento (sin importar que tipo de
elemento sea)
:first-of-type
:last-of-type
seleccionan al primer y ultimo hijo según el elemento. Por ejemplo, p:first-of-
type selecciona al primer párrafo hijo.
PSEUDO CLASES
PSEUDOCLASES CHILD y TYPE
:nth-child()
:nth-of-type()
Reciben parámetros:
numero -> 5 (selecciona al 5to elemento)
multiplo de n -> 2n (selecciona de 2 en 2)
formula -> 3n+1 (selecciona a 1, 4, 7)
even/odd -> pares e impares
PSEUDO CLASES
PSEUDOCLASES CHILD y TYPE
:nth-last-child()
:nth-last-of-type()
[Link] a nth-child() y nth-of-type() pero se cuentan desde el final
:only-type()
[Link] a nth-child() y nth-of-type() pero se cuentan desde el final