Inicio CSS estilos CSS selectores

CSS selectores

Jueves, 05-11-2015 15:27 - Leer comentarios - Comentar

Los selectores son patrones usados para seleccionar los elementos a los que se le quiere dar un estilo.
La columna "CSS" indica en qué versión CSS la propiedad se define (CSS1, CSS2, o CSS3).
Selector Example Example description CSS
.class .intro Selecciona todos los elementos con la class="intro" 1
#id #firstname Selecciona todos los elementos con la id="firstname" 1
* * Selecciona todos los elementos 2
element p Selecciona todos los elementos "p" 1
element,element div, p Selecciona todos los "div" y todos los "p" 1
element element div p Selecciona todos los "p" dentro de "div" 1
element"element div " p Selecciona todos los "p" donde el padre es "div" 2
element+element div + p Selecciona todos los "p" que se colocan justo despues de "div" 2
element1~element2 p ~ ul Selecciona todos los "ul" precedido por "p" 3
[attribute] [target] Selecciona todos los elementos con el atributo 2
[attribute=value] [target=_blank] Selecciona todos los elementos con target="_blank" 2
[attribute~=value] [title~=goibela] Selecciona todos los elementos que el atributo title contenga la palabra "goibela" 2
[attribute|=value] [lang|=es] Selecciona todos los elementos que el valor del atributo lang empiece con "es" 2
[attribute^=value] a[href^="https"] Selecciona todos los "a" cuyo atributo href empiece por "https" 3
[attribute$=value] a[href$=".pdf"] Selecciona todos los "a" cuyo atributo href termine por ".pdf" 3
[attribute*=value] a[href*="goibela"] Selecciona todos los "a" cuyo atributo href contenga la subcadena "goibela" 3
:active a:active Seleccione todos los links activos 1
::after p::after Inserte algo despues de "p" 2
::before p::before Inserte algo antes de "p" 2
:checked input:checked Seleccione todos los checked "input" 3
:disabled input:disabled Seleccione todos los disabled "input" 3
:empty p:empty Seleccione todos los "p" que no tiene hijos (incluidos los nodos de texto) 3
:enabled input:enabled Seleccione todos los enabled "input" 3
:first-child p:first-child Seleccione todos los "p" ese es el primer hijo de su padre 2
::first-letter p::first-letter Seleccione la primera letra de cada "p" 1
::first-line p::first-line Seleccione la primera linea de cada "p" 1
:first-of-type p:first-of-type Seleccione todos los "p" que es la primera "p" de su matriz 3
:focus input:focus Selecciona el elemento que tenga el fon¡co 2
:hover a:hover Selecciona link on mouse over 1
:in-range input:in-range Selecciona los elementos de entrada con un valor dentro de un rango especificado 3
:invalid input:invalid Selecciona Todos los elementos de entrada con un valor no válido 3
:lang(language) p:lang(es) Seleccione todos los "p" con atributo lang igual a "es" (Español) 2
:last-child p:last-child Seleccione todos los "p" que es el ultimo hijo de su padre 3
:last-of-type p:last-of-type Seleccione todos los "p" que es el ultimo elemento "p" de su matriz 3
:link a:link Selecciona todos los links sin visitar 1
:not(selector) :not(p) Seleccione todos los elementos que no sean "p" 3
:nth-child(n) p:nth-child(2) Seleccione todos los "p" que es el segundo hijo de su padre 3
:nth-last-child(n) p:nth-last-child(2) Seleccione todos los "p"que es el segundo hijo de su padre, contando desde el ultimo hijo 3
:nth-last-of-type(n) p:nth-last-of-type(2) Seleccione todos los "p" que es el segundo "p" de su padre, contando desde el ultimo hijo 3
:nth-of-type(n) p:nth-of-type(2) Seleccione todos los "p" que es el segundo "p" elemento de su padre 3
:only-of-type p:only-of-type Seleccione todos los "p" elemento que es el unico "p" elemento de su padre 3
:only-child p:only-child Seleccione todos los "p" elemento que es el unico hijo de su padre 3
:optional input:optional Selecciona los elementos de entrada sin atributo "required" 3
:out-of-range input:out-of-range Selecciona los elementos de entrada con un valor fuera de un rango especificado 3
:read-only input:read-only Selecciona los elementos de entrada con el "readonly" atributo especifica 3
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified 3
:required input:required Selecciona los elementos de entrada con el atributo "required" especificado 3
:root :root Selecciona elemento root del documento 3
::selection ::selection Selecciona la porcion de un elemento que es seleccionado por un usuario  
:target #news:target Seleccionar el actual activo #news (Click en la URL que contiene el nombre de anclaje) 3
:valid input:valid Selecciona todos los elementos input con valor valido 3
:visited a:visited Selecciona todos los links visitados 1

Comentarios

No se permiten comentarios en este momento.