FEBRERO 12/2019
En las hojas de estilo CSS, los selectores son la parte de las reglas que indican al navegador a qué elementos se van a aplicar las propiedades incluidas en las declaraciones.
- Selectores de tipo
- Selecciona todos los elementos que coinciden con el nombre dado.
Sintáxis:eltname
Ejemplo:input
se aplicará a cualquier elemento<input>
. - Selectores de clase
- Selecciona todos los elementos dado un atributo de
class
.
Sintáxis:.classname
Ejemplo:.index
se aplicará a cualquier elemento que tenga la clase "index". - Selectores de ID
- Selecciona un elemento basándose en el valor de su atributo
id
. Solo puede haber un elemento con un ID dado en un documento.
Sintáxis:#idname
Ejemplo:#toc
se aplicará a cualquier elemento que tenga el ID "toc". - Selector universal
- Selecciona todos los elementos. Puede estar restringido a un espacio de nombres o a todos los espacios de nombres.
Sintáxis:* ns|* *|*
Ejemplo:*
se aplicará a todos los elementos del documento. - Selectores de atributo
- Selecciona elementos basándose en el valor de un atributo dado.
Sintáxis:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Ejemplo:[autoplay]
se aplicará a todos los elementos que tengan el atributo "autoplay" asignado (a cualquier valor). - Combinadores:
tipos de selectores:
- Selectores de hermanos adyacentes
- El combinador
+
selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
Sintaxis:A + B
Ejemplo: La reglah2 + p
se aplicará a todos los elementos<p>
que siguen directamente a un elemento<h2>
. - Selectores de hermanos generales
- El combinador
~
selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
Sintaxis:A ~ B
Ejemplo: La reglap ~ span
se aplicará a todos los elementos<span>
que siguen un elemento<p>
. - Selectores de hijo
- El combinador
>
selecciona los elementos que son hijos directos del primer elemento.
Sintaxis:A > B
Ejemplo: La reglaul > li
se aplicará a todos los elementos<li>
que son hijos directos de un elemento<ul>
. - Selectores descendientes
- El combinador
Sintaxis:A B
Ejemplo: La regladiv span
se aplicará a todos los elementos<span>
que están dentro de un elemento<div>
. - EJERCICIO:
Comentarios
Publicar un comentario