Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Selectores CSS

En el CSS hay dos tipos de "pseudo-cosas": pseudo-clases y pseudo-elementos.
Las pseudo-clases (:link:visited:active:hover:focus:first-child:lang... ) actúan como si añadieran una clase al elemento.
Los pseudo-elementos (::first-letter::first-line::before::after) actúan como si nuevos elementos fueran insertados en el documento.
Los dos puntos dobles ( :: ) fueron introducidos en el CSS3 como un intento de hacer una distinción entre las :pseudo-clases y los ::pseudo-elementos. Por suerte no pasa nada si no ponemos los dos puntos dobles delante de los pseudo-elementos ( ::before ), ya que la mayoría de los navegadores entienden el formato antiguo introducido en el CSS2 ( :before ). Es más: IE8 parece no entender los dos puntos dobles ( ::before ), pero sí entiende los dos puntos ( :before ).
Una tabla inspirada por w3schools - CSS Selector Referencestar
SelectorEjemploDescripciónCSS
.classstar.laClaseSelecciona todos los elementos con class="laClase"1
#idstar#elIdSelecciona todos los elementos con id="elId"1
*star*Selector comodin. Selecciona todos los elementos.2
elementostarpSelecciona todos los elementos <p>1
elemento, elementostardiv,pSelecciona todos los elementos <div> y <p>1
elemento
elemento
star
div pSelecciona todos los elementos <p> dentro de los elementos <div>1
elemento > elementostardiv> pSelecciona todos los <p> cuyo elemento padre es un <div>2
elemento + elementostardiv+pSelecciona todos los <p> situados inmediatamente después de un <div>2
elemento1 ~ elemento2starp ~ ulSelecciona cada <ul> precedido por un <p>3
[attributo]star[target]Selecciona todos los elementos con un atributo target.2
[attributo =
valor]
star
[target=_blank]Selecciona todos los elementos con un atributo target="_blank"2
[attributo ~= contiene]star[title ~= primero]Selecciona todos los elementos con un atributo title que contiene "primero" de una lista de palabras separadas por espacios:
( selecciona: title = "primero parafo"title = "primero titulo", etc... )
2
[attributo |= empieza]star[lang|=en]Selecciona todos los elementos con un atributo lang que empieza con "en" de una lista de elementos separados por guiones:
( selecciona: lang = "en"lang = "en-US" y lang = "en-cockney" )
2
[attributo ^= empieza]stara[src ^= "https"]Selecciona todos los <a> con un atributo src que empieza con"https".3
[attributo $= acaba]stara[src$=".pdf"]Selecciona todos los <a>con un atributo src que acaba con ".pdf"3
[attributo *= contiene]stara[src *= "css3"]Selecciona todos los <a> con un atributo src que contiene "css3"3
:linkstara:linkSelecciona todos los enlaces no visitados1
:visitedstara:visitedSelecciona todos los enlaces visitados1
:activestara:activeSelecciona todos los enlaces activos1
:hoverstara:hoverSelecciona todos los enlaces al pasar por encima.1
::beforestarp:beforeInserta contenido delante de cada elemento<p>2
::afterstarp:afterInserta contenido después de cada elemento<p>2
:lang(language)p:lang(es)Selecciona cada <p> con un atributo lang="es" ( español )2
:nth-child(n)starp:nth-child(2)Selecciona cada <p> que sea el segundo hijo de su padre.3
:nth-last-child(n)starp:nth-last-child(2)Selecciona todos los <p> que sean el penúltimo hijo de su padre. ( El segundo a partir del último )3
:nth-of-type(n)starp:nth-of-type(2)Selecciona cada <p> que sea el segundo <p> hijo de su padre.3
:nth-last-of-type(n)starp:nth-last-of-type(2)Selecciona todos los <p> que sean el penúltimo <p> hijo de su padre. ( El segundo a partir del último )3
:first-letterstarp:first-letterSelecciona la primera letra de cada <p>.1
:first-linestarp:first-lineSelecciona la primera lí de cada <p>.1
:first-childstarp:first-childSelecciona cada <p> que sea el primer hijo de su padre.2
:first-of-typestarp:first-of-typeSelecciona todos los <p> que sean el primer <p> hijo de su padre.3
:only-childstarp:only-childSelecciona todos los <p> que sean el único hijo de su padre.3
:only-of-typestarp:only-of-typeSelecciona todos los <p> que sean el único <p> hijo de su padre.3
:last-childstarp:last-childSelecciona todos los <p> que sean el último hijo de su padre.3
:last-of-typestarp:last-of-typeSelecciona todos los <p> que sean el último <p> hijo de su padre.3
:root:rootSelecciona el elemento raíz de los documentos.
En HTML el elemento raíz es siempre el <html.>
3
:emptystarp:emptySelecciona cada <p> qu NO tenga elementos hijos ( Esto implica que tampoco puede tener texto. )3
:targetstar#news:targetEl selector de destino :target se puede usar para aplicar estilos al elemento de destino activo.3
:not(selector)star:not(p)Selecciona todos los elementos que NO sean un párafo ( <p> ).3
::selection::selection
Selecciona la parte de un elemento seleccionada por el usuario.
 

Pseudo-clases para UI ( interfaz de usuario )

Afecta a los elementos de interfaz de usuario, como por ejemplo los elementos de formulario.
SelectorEjemploDescripción
:focusstarinput:focusSelecciona el elemento <input> enfocado.
:focus-withinstarform:focus-withinSelecciona un elemento, por ejemplo un formulario, que tiene un elemento hijo focusado..
:enabledstarinput:enabledSelecciona todos los elementos <input> que están habilitados ( permiten la escritura ).
:disabledstarinput:disabledSelecciona todos los elementos <input> deshabilitados ( que no permiten la escritura )
:checkedstarinput:checkedSelecciona todos los elementos <input> ( botones de radio o casillas de verificación ) marcados ( checked )
:indeterminateinput:indeterminateSe refiere a las casillas de verificación o botones de radio que no están ni activadas ( checked ) ni desactivadas ( unchecked )
¡OJO!
En HTML no existe un atributo "indeterminate". Es posible hacer que una casilla de verificación sea indeterminate, solo a través de javascript:
checkbox.indeterminate = true;
:defaultinput:default ~ label{
border:1px solid red;
}
Se refiere a las casillas de verificación o botones de radio que están habilitados por defecto. ( No cambia al marcar otra casilla ).
:validstarinput[required]:valid{
box-shadow: green;
}
Se refiere a los elementos de formulario que cumplen los requisitos necesarios.
:invalidstarinput[required]:invalid{
box-shadow: red;
}
Se refiere a los elementos de formulario que NO cumplen los requisitos necesarios.
:in-rangestarinput:in-rangeSelecciona los elementos cuyo valor esta dentro de los limites establecidos ( por los atributos min y max )
<input type="number" min="1" max="10" value="5">
:out-of-rangestarinput:out-of-rangeSelecciona los elementos cuyo valor esta fuera de los limites establecidos ( por los atributos min y max )
<input type="number" min="1" max="10" value="15">
:requiredstarinput:requiredSelecciona los elementos de formulario obligatorios ( que tienen un atributo required )
:optionalstarinput:optionalSelecciona los elementos de formulario opcionales ( que no tienen un atributo required )
:read-writestarinput:read-writeSelecciona los elementos de formulario que pueden ser editados por el usuario (elementos contenteditable = "true" o elementos input que no tienen un atributo readonly ).
:read-onlystarinput:read-onlySelecciona los elementos de formulario que NO pueden ser editados por el usuario (elementos input que tienen un atributo readonly ).

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas