El mejor tutorial de selectores CSS en 2024. En este tutorial podrás aprender selectores CSS
selectores CSS se utilizan para seleccionar los elementos que desee a patrón de estilo.
"CSS" columna indica en la que definen las propiedades CSS (CSS1, CSS2, o CSS3).
selector | ejemplo | El ejemplo muestra | CSS |
---|---|---|---|
. Clase | .intro | Seleccione todo el elemento class = "intro" | 1 |
Id# | #firstname | Seleccionar todos los elementos id = "Nombre" | 1 |
* | * | Seleccionar todos los elementos | 2 |
elemento | p | Seleccionar todos los elementos <P> | 1 |
elemento, elemento | div,p | Seleccione todo el elemento <div> y <p> elemento | 1 |
elemento de elemento | div p | Seleccione <div> todos los elementos <p> dentro del elemento | 1 |
> Elemento deelemento | div>p | Seleccionar todos los padres es un elemento <div> del elemento <p> | 2 |
elemento de elemento+ | div+p | Seleccionar elemento <p> seguido de todos los elementos <div> después | 2 |
[Atributo] | [target] | Seleccionar todos los elementos con el atributo de destino | 2 |
[Atributo = Valor] | [target=-blank] | Seleccionar todo el uso target = - elemento "en blanco" de | 2 |
[Atributo ~ = valor] | [title~=flower] | Seleccionar todos los elementos del atributo de título contiene la palabra "flor" de | 2 |
[Atributo | = idioma] | [lang|=en] | Seleccionar todos los elementos de un atributo lang comenzar value = "ES" de | 2 |
: enlace | a:link | Seleccionar todos los enlaces no visitados | 1 |
: visited | a:visited | Seleccionar todos los enlaces visitados | 1 |
: activa | a:active | Seleccione el enlace activo | 1 |
: hover | a:hover | Al seleccionar con el ratón sobre el enlace de arriba | 1 |
: enfoque | input:focus | Seleccione el elemento de entrada tiene el foco | 2 |
: First-letter | p:first-letter | Seleccione la primera letra de cada elemento <P> | 1 |
: First-line | p:first-line | Seleccione cada <P> El primer elemento de línea | 1 |
: First-child | p:first-child | elemento especificado solamente cuando <p> es el primer hijo de su estilo principal. | 2 |
: antes | p:before | Insertar contenido antes de cada elemento <p> | 2 |
: después de | p:after | Insertar contenido después de cada elemento <P> | 2 |
: Lang (idioma) | p:lang(it) | Seleccione un atributo lang = valor inicial "él" todos los elementos <P> | 2 |
element1 ~ elemento2 | p ~ ul | Cada elemento de elección p ul después elemento | 3 |
[Atributo ^ = valor] | un [src = ^ "https"] | Seleccione cada valor del atributo src a "https" al principio del elemento | 3 |
[Atributo $ = valor] | un [src = $ ". pdf"] | Seleccione cada valor del atributo src para ".pdf" en el extremo del elemento | 3 |
[Atributo * = valor] | un [* src = "w3big"] | Seleccione cada elemento de valor de atributo src contiene la subcadena "w3big" de | 3 |
: La primera de tipo | P: first-of-type | Seleccione cada elemento p p es el primer elemento de su padre | 3 |
: El último de los de tipo | p: el último de los de tipo | Seleccione cada elemento p es el último elemento de su padre p | 3 |
: Only-de-tipo | P: Sólo-de-tipo | Seleccione cada elemento p es el único elemento de su matriz p | 3 |
: Un solo hijo | p: un solo hijo | Seleccione cada elemento p es el único elemento hijo de su padre | 3 |
: Nth-child (n) | P: nth-child (2) | Seleccione cada elemento p es el segundo hijo de su padre | 3 |
: Nth-last-child (n ) | P: nth-last-child (2) | Seleccione cada elemento p es el segundo hijo de su padre, a contar desde el último hijo | 3 |
: Nth-de-tipo (n ) | P: nth-de-tipo (2) | Seleccione cada elemento p es el segundo elemento p de su padre | 3 |
: Nth-última-de-tipo (n) | P: nth-última-de-tipo (2) | Seleccione cada elemento p es el segundo elemento p de su padre, a contar desde el último hijo | 3 |
: Last-child | P: last-child | Seleccione cada elemento p es el último hijo de su padre. | 3 |
: root | : Root | Seleccione el elemento raíz del documento | 3 |
: vacío | P: vacía | Seleccione cada elemento de la p no tiene hijos (incluidos los nodos de texto) | 3 |
: diana | #news: diana | Seleccione el elemento #news actualmente activo (incluyendo la URL nombre de ancla puede hacer clic) | 3 |
: habilitado | entrada: habilitado | Seleccione cada elemento de entrada habilitada | 3 |
: desactivado | Entrada: personas con discapacidad | Al seleccionar cada elemento de entrada desactivado | 3 |
: activada | Entrada: activada | Seleccione cada elemento de entrada seleccionado | 3 |
: No (selector) | : No (p) | Seleccione cada elemento no es p elementos | 3 |
:: selección | :: Selección | Elemento está seleccionado o marcado en el estado de la coincidencia parcial de usuario | 3 |
: Fuera de rango | : Fuera de la gama | elemento de entrada de valor coincidente fuera del rango especificado | 3 |
: En rango | : Dentro de la gama | Coincidencia elemento de entrada de valor dentro del rango especificado del | 3 |
: Lectura y escritura | : Lectura y escritura | Se utiliza para que coincida con el elemento de lectura y escritura | 3 |
: Sólo lectura | : Sólo lectura | Para hacer juego el sistema "sólo lectura" elemento de atributo (de sólo lectura) | 3 |
: opcional | Opcional: | Para hacer coincidir elemento de entrada opcional | 3 |
: requerida | : Requerido | Configurar para que coincida con el elemento "necesario" propiedad | 3 |
: válido | : Válido | Se utiliza para que coincida con el valor de entrada es un elemento legítimo | 3 |
: inválido | : No válido | Valor ilegal de los partidos elemento de entrada | 3 |