Selectores CSS

SelectorEjemploDescripción
.class.introSelecciona todos los elementos con class = «intro»
.class1.class2.name1.name2Selecciona todos los elementos con name1 y name2 establecidos dentro de su atributo de clase
.class1 .class2.name1 .name2Selecciona todos los elementos con nombre2 que son descendientes de un elemento con nombre1
#id#firstnameSelecciona el elemento con id = «firstname»
**Selecciona todos los elementos
elementpSelecciona todos los elementos < p >
element.classp.introSelecciona todos los elementos < p > con class = «intro»
element,elementdiv, pSelecciona todos los elementos < div > y todos los elementos < p >
element elementdiv pSelecciona todos los elementos < p > dentro de elementos < div >
element>elementdiv > pSelecciona todos los elementos < p > donde el padre es un elemento < div >
element+elementdiv + pSelecciona el primer elemento < p > que se coloca inmediatamente después de elementos < div >
element1~element2p ~ ulSelecciona cada elemento < ul > que está precedido por un elemento < p >
[attribute][target]Selecciona todos los elementos con un atributo «target»
[attribute=value][target=_blank]Selecciona todos los elementos con target = «_ blank»
[attribute~=value][title~=flower]Selecciona todos los elementos con un atributo título que contiene la palabra «flower».
[attribute|=value][lang|=en]Selecciona todos los elementos con un valor de atributo lang igual a «en» o comenzando con «en-«
[attribute^=value]a[href^=»https»]Selecciona cada elemento < a > cuyo valor de atributo href comienza con «https»
[attribute$=value]a[href$=».pdf»]Selecciona cada elemento < a > cuyo valor de atributo href termina en «.pdf»
[attribute*=value]a[href*=»abc»]Selecciona cada elemento < a > cuyo valor de atributo href contiene la subcadena «abc»
:activea:activeSelecciona el enlace activo
::afterp::afterInserte algo después del contenido de cada elemento < p >
::beforep::beforeInserte algo antes del contenido de cada elemento < p >
:checkedinput:checkedSelecciona todas los elementos < input > con checked
:defaultinput:defaultSelecciona el elemento < input > predeterminado
:disabledinput:disabledSelecciona todas los elementos < input > deshabilitados
:emptyp:emptySelecciona todos los elementos <p> que no tienen hijos (incluidos los nodos de texto)
:enabledinput:enabledSelecciona todos los elemento < input > habilitado
:first-childp:first-childSelecciona cada elemento < p > que es el primer hijo de su padre
::first-letterp::first-letterSelecciona la primera letra de cada elemento < p >
::first-linep::first-lineSelecciona la primera línea de cada elemento < p >
:first-of-typep:first-of-typeSelecciona cada elemento < p > que es el primer elemento < p > de su padre
:focusinput:focusSelecciona el elemento input que tiene el foco
:fullscreen:fullscreenSelecciona el elemento que está en modo de pantalla completa.
:hovera:hoverSelecciona enlaces al pasar el mouse sobre el
:in-rangeinput:in-rangeSelecciona cualquier <input>, pero solo cuando tiene un rango especificado, y su valor está dentro de ese rango
:indeterminateinput:indeterminateSelecciona elementos de entrada que están en un estado indeterminado.
:invalidinput:invalidSelecciona todos los elementos de entrada con un valor no válido
:lang(language)p:lang(it)Selecciona cada elemento < p > con un atributo lang igual a «it» (italiano)
:last-childp:last-childSelecciona cada elemento < p > que es el último hijo de su padre
:last-of-typep:last-of-typeSelecciona cada elemento < p > que es el último elemento < p > de su padre
:linka:linkSelecciona todos los enlaces no visitados
::marker::markerSelecciona los marcadores de los elementos de la lista.
:not(selector):not(p)Selecciona todos los elementos que no sean elemento < p >
:nth-child(n)p:nth-child(2)Selecciona cada elemento < p > que es el segundo hijo de su padre
:nth-last-child(n)p:nth-last-child(2)Selecciona cada elemento < p > que es el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)p:nth-last-of-type(2)Selecciona cada elemento < p > que es el segundo elemento < p > de su padre, contando desde el último hijo
:nth-of-type(n)p:nth-of-type(2)Selecciona cada elemento < p > que es el segundo elemento < p > de su padre
:only-of-typep:only-of-typeSelecciona cada elemento < p > que es el único elemento < p > de su padre
:only-childp:only-childSelecciona cada elemento < p > que es el único hijo de su padre
:optionalinput:optionalSelecciona elementos de entrada sin atributo «required»
:out-of-rangeinput:out-of-rangeSelecciona elementos de entrada con un valor fuera de un rango especificado
::placeholderinput::placeholderSelecciona elementos de entrada con el atributo «placeholder» especificado
:read-onlyinput:read-onlySelecciona elementos de entrada con el atributo «readonly» especificado
:read-writeinput:read-writeSelecciona elementos de entrada con el atributo «read-only» NO especificado
:requiredinput:requiredSelecciona elementos de entrada con el atributo «required» especificado
:root:rootSelecciona el elemento raíz del documento.
::selection::selectionSelecciona la parte de un elemento que selecciona un usuario.
:target#news:targetSelecciona el elemento #news activo actual (se hace clic en una URL que contiene ese nombre de ancla)
:validinput:validSelecciona todos los elementos de entrada con un valor válido
:visiteda:visitedSelecciona todos los enlaces visitados
Selectores CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll hacia arriba