En este artículo seguiremos usando el mismo ejemplo que usamos en la entrada anterior y que tiene el siguiente aspecto:
<h1>Titulo</h1> <h2>Subtitulo</h2> <p id="p1">Esto es un parráfo y dentro hay un enlace a <a id="link1" class="a1" href="http://www.bing.com">Bing</a> y otro a <a id="link2" class="a1" href="http://www.google.es">Google</a></p> <p id="p2">Tambien podemos tener un listado de idiomas</p> <ul id="list1"> <li>Inglés</li> <li>Español</li> <li>Frances</li> <li>Alemán</li> <li>Italiano</li> </ul>:root
Personalmente desconocía este selector. Este selector selecciona el elemento raíz de un documento. Es un selector muy poco útil ya que siempre devuelve el elemento html y se incluye como novedad dentro de la especificación de HTML5.
:root { color: #FF0000 }Selectores de hijos (child selectors)
Este selector nos ayuda a seleccionar un elemento individual que está contenido dentro de otro elemento. Podemos usar cuatro tipos de selectores
- :fist-child: Selecciona el primer elemento de la lista de elementos.
- :last-child: Selecciona el último elemento de la lista de elementos.
- :only-child: Selecciona el elemento si es el único en la lista de elementos.
- :only-of-type: Selecciona el elemento si es el único elemento en a lista y es de un tipo determinado.
ul :first-child { color: #aaddcc } ul :last-child { color: #336699 }Con este CSS estamos cambiando el estilo del primer y último descendiente de nuestro ul.
Selectores por posición (nth-child selectors)
Estos selectores son parecidos a los explicados anteriormente, pero se aplican en base al índice de su posición. Tenemos estos cuatro selectores
- :nth-child(n): Selecciona el elemento que está en a posición n de la lista de elementos.
- :nth-last-child(n): Selecciona el elemento que está en la posición n desde el último elemento de la lista de elementos.
- nth-of-type(n): Selecciona el elemento que está en la posición n de la lista elemento, en base al tipo definido por su padre.
- nth-last-of-type(n): Igual que el anterior, pero el índice se cuenta desde el último elemento.
ul :nth-child(2) { color: #aaddcc } ul :nth-last-child(2) { color: #336699 }Selectores pseudo-clases
Los selectores de pseudo-clases no permiten seleccionar un elementos en base a su estado. Tenemos las siguiente pseudo-clases a nuestra disposición
- :enabled - El selectores está habilitado.
- :disabled - El selector está deshabilitado.
- :checked - El selector está chequeado.
- :default - Selecciona valores por defecto.
- :valid e :invalid - Selecciona elementos de tipo input en base a si son validos o no (después de su valicación)
- :in-range y :out-of-range - Selecciona elementos dentro o fuera de un rango.
- :required y :optional - Selecciona elementos cuya presencia es obligatoria u opcional.
Todos estos selectores son introducidos en CSS3.
- :link y :visited - El selectores :link selecciona enlaces y el selector :visited selecciona aquellos enlaces que el usuario ya ha visitado.
- :hover: Este selector se usa cuando el ratón se mueve por encima de un elemento.
- :active: Este selector se usa cuando el usuario activa un elemento. Esto ocurre en la mayoría de los casos cuando el usuario hace click sobre el elemento.
Y con esto termina esta introducción a los selectores que tenemos disponibles en los CSS.
Happy coding!
Happy coding!