:active :checked :disabled :empty :enabled :first-child :first-of-type :focus :hover :in-range :invalid :last-child :last-of-type :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :required :target :valid :visited
::after ::before ::first-letter ::first-line ::selection
para open_in_newenlaces, se aplica en cuanto está siendo cliqueado
ejemplo:
<p> Click en el <a href="#"> vinculo </a> para que cambie de color </p>
a:active { color: red; }
Click en el vinculo para que cambie de color
para input formularios, se aplica cuando se marca un botón de radio (<input type="radio">), caja de verificación (<input type="checkbox">) o una opción en un menú (<option> en un <select>)
ejemplo:
<form action="#">
<label>
<input type="checkbox" name="musica" value="m001" checked>jazz
</label>
<label>
<input type="checkbox" name="musica" value="m002">blues
</label>
<label>
<input type="checkbox" name="musica" value="m003">rock
</label>
<label>
<input type="checkbox" name="musica" value="m004">pop
</label>
<input type="checkbox" name="musica" value="m005">cumbia villera
</label>
</form>
input:checked {
width: 2em;
height: 2em;
}
comunmente para input formularios, representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado.
ejemplo:
<form action="#">
<label> Nombre: </label>
<input type="text" name="mombre"><br>
<label> Email: </label>
<input type="email" name="email"><br>
<label> Fecha de nacimiento: </label>
<input type="date" name="fecha"><br>
<label> Nacionalidad: </label>
<input type="text" name="pais" disabled><br>
</form>
input:disabled {
border: solid 1px red;
color: red;
cursor: no-drop;
}
para publicuso general, corresponde a un elemento sin ningún "hijo". Sólo cuando hay nodos de elemento o texto con uno o más caracteres dentro del elemento ése se convierte en no vacío.
ejemplo:
<div> Caja NO vacía. </div>
<div> Caja NO vacía. </div>
<div> Caja NO vacía. La próxima Caja está vacía. </div>
<div></div>
div {
background-color: white;
min-height: 2em;
margin-bottom: 0.5em;
}
div:empty { background-color: red; }
comunmente para input formularios, un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él o acepta que se le introduzca texto) o si accepta el foco.
ejemplo:
<form action="#">
<label> Nombre: </label>
<input type="text" name="mombre"><br>
<label> Email: </label>
<input type="email" name="email"><br>
<label> Fecha de nacimiento: </label>
<input type="date" name="fecha"><br>
<label> Nacionalidad: </label>
<input type="text" name="pais" disabled><br>
</form>
input:enabled {
border: solid 1px blue;
color: blue;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
para publicuso general, representa cualquier elemento que sea el primer elemento "hijo" del elemento "padre".
ejemplo:
<div class="caja_padre">
<h3> subtitulo primer "hijo" </h3>
<p> párrafo segundo "hijo" con
<span> primer "span" hijo </span> y
<span> segundo "span" hijo </span>
</p>
<p> párrafo tercer "hijo" </p>
</div>
<div class="caja_padre">
<p> párrafo primer "hijo" </p>
<p> párrafo segundo "hijo" </p>
<p> párrafo tercer "hijo" </p>
</div>
.caja_padre :first-child {
background-color: lightblue;
color: lightcoral;
line-height: 2em;
}
párrafo segundo "hijo" con primer "span" hijo y segundo "span" hijo
párrafo tercer "hijo"
párrafo primer "hijo"
párrafo segundo "hijo"
párrafo tercer "hijo"
para publicuso general, representa el primero de los "hermanos" de su tipo en la lista de "hijos" de su elemento "padre".
ejemplo:
<div class="caja_padre">
<h3> subtitulo primer "hijo", primero de su tipo </h3>
<p> párrafo segundo "hijo" pero primero de su tipo </p>
<p> párrafo tercer "hijo" </p>
</div>
<div class="caja_padre">
<p> párrafo primer "hijo" y primero de su tipo </p>
<p> párrafo segundo "hijo" con <span> primer "span" </span> y <span> segundo span </span> </p>
<p> párrafo tercer "hijo" </p>
</div>
.caja_padre *:first-of-type {
background-color: lightcoral;
color: darkblue;
line-height: 2em;
}
párrafo segundo "hijo" pero primero de su tipo
párrafo tercer "hijo"
párrafo primer "hijo" y primero de su tipo
párrafo segundo "hijo" con primer "span" y segundo span
párrafo tercer "hijo"
para input formularios, se aplica cuando un elemento recibo el foco, o bien por que el usuario lo ha seleccionado mediante el uso del teclado o bien mediante el mouse (por ejemplo un campo input de un formulario).
ejemplo:
<form action="#">
<label> Nombre: </label>
<input type="text" name="mombre"><br>
<label> Email: </label>
<input type="email" name="email"><br>
<label> Fecha de nacimiento: </label>
<input type="date" name="fecha"><br>
<label> Nacionalidad: </label>
<input type="text" name="pais" ><br>
</form>
input:focus {
border: solid 1px blue;
color: blue;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
en principio usado para open_in_newenlaces, hoy tiene publicuso general y se presenta cuando el usuario coloca el puntero sobre algún elemento, pero no necesariamente está activo. Este estilo puede ser sobreescrito por cualquier otra pseudo-clase relacionada a link, como :link, :visited, y :active, apareciendo en las siguientes reglas.
Para usar apropiadamente css en links, se necesita seguir el siguiente orden:
:link, :visited, :hover y :active.
ejemplo de :hover:
<p> Posiciónese sobre el <a href="#"> vinculo </a> para que cambie de color </p>
a:hover { color: red; }
Posiciónese sobre el vinculo para que cambie de color
para input formularios, se aplica cuando un campo de un formulario recibe valores permitidos.
ejemplo:
<form action="#">
<label> Edad: </label>
<input type="number" name="edad" placeholder="debe ser mayor de edad" min="18" max="100" value="12">
</form>
input:in-range {
color: darkgreen;
background-color: lightgreen;
}
para input formularios, representa a cualquier elemento <input> de un formulario cuyo contenido falla al intentar ser validado según la configuración de tipos del input. Este selector permite que los campos inválidos adopten una apariencia diferente que ayude al usuario a dectectarlos y corregirlos fácilmente.
ejemplo:
<form action="#">
<label> Edad: </label>
<input type="number" name="edad" placeholder="debe ser mayor de edad" min="18" max="100">
</form>
input:invalid {
background-color: lightcoral;
color: red;
}
para publicuso general, representa cualquier elemento que sea el último elemento "hijo" del elemento "padre".
ejemplo:
<div class="caja_padre">
<p> párrafo primer "hijo" </p>
<p> párrafo último de su tipo pero no último "hijo" </p>
<div> último "hijo" </div>
</div>
<div class="caja_padre">
<p> párrafo primer "hijo" </p>
<p> párrafo con
<span> primer "span" </span> y
<span> segundo span </span>
</p>
<p> párrafo último "hijo" </p>
</div>
.caja_padre :last-child {
background-color: lightblue;
color: lightcoral;
line-height: 2em;
}
párrafo primer "hijo"
párrafo último de su tipo pero no último "hijo"
párrafo primer "hijo"
párrafo con primer "span" y segundo span
párrafo último "hijo"
para publicuso general, representa el último de los "hermanos" de su tipo en la lista de "hijos" de su elemento "padre".
ejemplo:
<div class="caja_padre">
<h3> subtitulo primer "hijo", último de su tipo </h3>
<p> párrafo segundo "hijo" </p>
<p> párrafo tercer "hijo", último de su tipo </p>
</div>
<div class="caja_padre">
<p> párrafo primer "hijo" </p>
<p> párrafo segundo "hijo" con
<span> primer "span" </span> y
<span> segundo span </span>
</p>
<p> último "hijo" y último de su tipo </p>
</div>
.caja_padre :last-of-type {
background-color: lightcoral;
color: darkblue;
line-height: 2em;
}
párrafo segundo "hijo"
párrafo tercer "hijo", último de su tipo
párrafo primer "hijo"
párrafo segundo "hijo" con primer "span" y segundo span
último "hijo" y último de su tipo
para open_in_newenlaces cuyos destinos no han sido visitados aun. Este estilo puede ser sobreescrito por cualquier otra pseudo-clase relacionada a link, como :hover, :visited, y :active, apareciendo en las siguientes reglas.
Para usar apropiadamente css en links, se necesita seguir el siguiente orden:
:link, :visited, :hover y :active.
ejemplo de :link :
<p> Los <a href="#"> vinculos </a> de destinos aun no visitados serán de color <a href="#"> rojo </a> </p>
a:link { color: red; }
para publicuso general, representa todos los elementos seleccionados menos los que responden al selector dentro de los paréntesis de ":not()".
ejemplo:
<h3> primer hijo, NO último hijo con
<span> span primer hijo </span> y
<span> span último hijo </span>
</h3>
<div> NI primer ni último "hijo" </div>
<article> NI primer ni último "hijo" </article>
<p> último "hijo", NO primer hijo con
<span> span primer hijo </span> y
<span> span último hijo </span>
</p>
:not(:first-child) {
background-color: lightcoral;
}
:not(:last-child) {
color: blue;
}
último "hijo", NO primer hijo con span primer hijo y span último hijo
para publicuso general, representa cualquier elemento "hijo" del elemento "padre" que corresponda con el número o expresión dentro del paréntesis de ":nth-child()".
ejemplo:
<div class="caja_padre">
<p> párrafo primer hijo </p>
<p> párrafo segundo hijo </p>
<div> tercer hijo </div>
<p> párrafo cuarto hijo con
<span> primer span </span>,
<span> segundo span </span> y
<span> tercer span </span>
</p>
<p> párrafo quinto hijo </p>
<p> párrafo último hijo </p>
</div>
.caja_padre :nth-child(2) {
background-color: lightblue;
color: lightcoral;
}
.caja_padre :nth-child(3n) {
background-color: darkblue;
color: white;
}
párrafo primer hijo
párrafo segundo hijo
párrafo cuarto hijo con primer span , segundo span y tercer span
párrafo quinto hijo
párrafo último hijo
para publicuso general, como ":nth-child", representa cualquier elemento "hijo" del elemento "padre" que corresponda con el número o expresión dentro del paréntesis de ":nth-last-child()", sólo que comenzando desde el final.
ejemplo:
<div class="caja_padre">
<p> párrafo primer hijo </p>
<p> párrafo segundo hijo </p>
<div> tercer hijo </div>
<p> párrafo cuarto hijo con
<span> primer span </span>,
<span> segundo span </span> y
<span> tercer span </span>
</p>
<p> párrafo quinto hijo </p>
<p> párrafo último hijo </p>
</div>
.caja_padre :nth-last-child(4) {
background-color: lightblue;
color: lightcoral;
}
.caja_padre :nth-last-child(-n+2) {
background-color: darkblue;
color: white;
}
párrafo primer hijo
párrafo segundo hijo
párrafo cuarto hijo con primer span , segundo span y tercer span
párrafo quinto hijo
párrafo último hijo
para publicuso general y representa, comenzando desde el final, el/los "hermanos" de su tipo en la lista de "hijos" de su elemento "padre" que corresponda/n con el número o expresión dentro del paréntesis de ":nth-last-of-type()".
ejemplo:
<div class="caja_padre">
<p> párrafo primer hijo </p>
<p> párrafo segundo hijo </p>
<div> quinto hijo contando desde el final, pero segundo de su tipo </div>
<div> cuarto hijo contando desde el final, pero primero de su tipo </div>
<p> párrafo cuarto hijo con
<span> primer span </span>,
<span> segundo span </span> y
<span> tercer span </span>
</p>
<p> párrafo segundo hijo, contando desde el final </p>
<p> párrafo último hijo </p>
</div>
.caja_padre :nth-last-of-type(2) {
background-color: lightblue;
color: lightcoral;
}
párrafo primer hijo
párrafo segundo hijo
párrafo cuarto hijo con primer span , segundo span y tercer span
párrafo segundo hijo, contando desde el final
párrafo último hijo
para publicuso general, representa el/los "hermanos" de su tipo en la lista de "hijos" de su elemento "padre" que corresponda/n con el número o expresión dentro del paréntesis de ":nth-of-type()".
ejemplo:
<div class="caja_padre">
<p> párrafo primer hijo </p>
<p> párrafo segundo hijo </p>
<div> quinto hijo contando desde el final, pero segundo de su tipo </div>
<div> cuarto hijo contando desde el final, pero primero de su tipo </div>
<p> párrafo cuarto hijo con
<span> primer span </span>,
<span> segundo span </span> y
<span> tercer span </span>
</p>
<p> párrafo segundo hijo, contando desde el final </p>
<p> párrafo último hijo </p>
</div>
.caja_padre :nth-of-type(2) {
background-color: lightblue;
color: lightcoral;
}
párrafo primer hijo
párrafo segundo hijo
párrafo cuarto hijo con primer span , segundo span y tercer span
párrafo segundo hijo, contando desde el final
párrafo último hijo
para publicuso general, representa cualquier elemento que sea el único hijo de su padre.
ejemplo:
<div class="caja_padre">
<p> párrafo primer hijo </p>
<p> párrafo segundo hijo </p>
</div>
<div class="caja_padre">
<p> párrafo único hijo </p>
</div>
<div class="caja_padre">
<p> párrafo primer hijo con <span> único hijo </span> </p>
<p> párrafo segundo hijo </p>
</div>
.caja_padre :only-child {
background-color: lightblue;
color: lightcoral;
}
párrafo primer hijo
párrafo segundo hijo
párrafo único hijo
párrafo primer hijo con span único hijo
párrafo segundo hijo
para publicuso general, representa el elemento que sea el único hijo de su tipo.
ejemplo:
<div class="caja_padre">
<p> párrafo </p>
<p> párrafo </p>
<div> div </div>
<p> párrafo </p>
<article> article </article>
<p> párrafo </p>
</div>
.caja_padre :only-of-type {
background-color: lightblue;
color: lightcoral;
}
párrafo
párrafo
párrafo
párrafo
para input formularios, se aplica cuando un campo de un formulario NO es de llenado obligatorio, es decir, NO tiene el atributo "required".
ejemplo:
<form action="#">
<label> Nombre: </label>
<input type="text" name="mombre" required><br>
<label> Email: </label>
<input type="email" name="email" required><br>
<label> Fecha de nacimiento: </label>
<input type="date" name="fecha"><br>
<label> Nacionalidad: </label>
<input type="text" name="pais" ><br>
</form>
input:optional {
background-color: rgba(0, 0, 255, 0.1);
border: solid 1px rgba(0, 0, 255, 0.3);
color: rgba(0, 0, 255, 0.3);
}
para input formularios, representa a cualquier elemento <input> de un formulario cuyo contenido exede los límites de los valores permitidos.
ejemplo:
<form action="#">
<label> Edad: </label>
<input type="number" name="edad" placeholder="debe ser mayor de edad" min="18" max="100">
</form>
input:out-of-range {
background-color: lightcoral;
color: red;
}
para input formularios, se aplica cuando un campo de un formulario ES de llenado obligatorio, es decir, tiene el atributo "required".
ejemplo:
<form action="#">
<label> Nombre: </label>
<input type="text" name="mombre" required><br>
<label> Email: </label>
<input type="email" name="email" required><br>
<label> Fecha de nacimiento: </label>
<input type="date" name="fecha"><br>
<label> Nacionalidad: </label>
<input type="text" name="pais" ><br>
</form>
input:required {
background-color: rgba(255, 0, 0, 0.1);
border: solid 1px rgba(255, 0, 0, 0.8);
color: rgba(255, 0, 0, 0.8);
}
para publicuso general, representa el elemento único, si existe alguno, con un "id" coincidente con el valor del atributo "href" de un vínculo y SÓLO cuando se ha cliqueado en dicho vínculo.
Con la pseudo-classe ":target" se ueden hacer "ventanas modales" con CSS puro (sin javascript)
ejemplo:
<p>
<a href="#parrafo_1"> párrafo 1 </a>
<a href="#div_2"> div 2 </a>
<a href="#parrafo_3"> párrafo 3 </a>
</p>
<p id="parrafo_3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui natus iusto porro ipsa numquam saepe explicabo aliquam a asperiores voluptas!
</p>
<div id="div_2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui natus iusto porro ipsa numquam saepe explicabo aliquam a asperiores voluptas!
</div>
<p id="parrafo_3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui natus iusto porro ipsa numquam saepe explicabo aliquam a asperiores voluptas!
</p>
:target {
background-color: white;
color: red;
outline: solid 1px red;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui natus iusto porro ipsa numquam saepe explicabo aliquam a asperiores voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui natus iusto porro ipsa numquam saepe explicabo aliquam a asperiores voluptas!
para input formularios, representa a cualquier elemento <input> de un formulario que cumpla con los ajustes de validación especificados para dicho elemento. De esa forma podemos especificar un estilo y apariencia que confirme al usuario que los datos introducidos en el control de formulario son correctos.
ejemplo:
<form action="#">
<label> Email: </label>
<input type="email" name="email" required>
</form>
input:valid {
background-color: lightgreen;
color: darkgreen;
}
para open_in_newenlaces cuyos destinos YA han sido visitados. Este estilo puede ser sobreescrito por cualquier otra pseudo-clase relacionada a link, como :link, :hover, y :active, apareciendo en las siguientes reglas.
Para usar apropiadamente css en links, se necesita seguir el siguiente orden:
:link, :visited, :hover y :active.
ejemplo de :visited :
<p> Los <a href="#"> vinculos </a> de destinos YA visitados serán de color <a href="#"> rojo </a> </p>
a:visited { color: red; }
Crea un pseudo-elemento que será el último hijo del elemento seleccionado. En general se utiliza para añadir contenido estético a un elemento. Es un elemento en línea por defecto.
ejemplo de ::after :
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
</blockquote>
blockquote::after {
content: '"';
background-color: white;
color: lightcoral;
font-size: 2em;
font-weight: bold;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.85);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
Crea un pseudo-elemento que será el primer hijo del elemento seleccionado. En general se utiliza para añadir contenido estético a un elemento. Es un elemento en línea por defecto.
ejemplo de ::before :
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
</blockquote>
blockquote::before {
content: '"';
background-color: white;
color: lightcoral;
font-size: 2em;
font-weight: bold;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.85);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
selecciona la primera letra de la primera línea de un bloque, si no está precedido por cualquier otro tipo de contenido (como imágenes o tablas en línea) en su línea.
ejemplo de ::first-letter :
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
</p>
p::first-letter {
background-color: white;
color: lightcoral;
font-size: 3em;
font-weight: bold;
padding: .25rem;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus harum natus, quia dolorum, distinctio eius!
aplica estilos sólo a la primera línea de un elemento..
ejemplo de ::first-line :
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam repudiandae, officiis nisi pariatur suscipit amet ad voluptates. Temporibus iure, ratione veritatis cupiditate, rerum totam minus.
</p>
p::first-line {
background-color: lightcoral;
color: darkblue;
font-weight: bold;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam repudiandae, officiis nisi pariatur suscipit amet ad voluptates. Temporibus iure, ratione veritatis cupiditate, rerum totam minus.
aplica reglas de estilo a una porción de un documento que ha sido destacado (por ejemplo, por selección con el mouse o algún otro puntero en un dispositivo) por el usuario.
ejemplo de ::selection :
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam repudiandae, officiis nisi pariatur suscipit amet ad voluptates. Temporibus iure, ratione veritatis cupiditate, rerum totam minus.
</p>
::selection {
background-color: lightcoral;
color: darkblue;
font-weight: bold;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.5);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam repudiandae, officiis nisi pariatur suscipit amet ad voluptates. Temporibus iure, ratione veritatis cupiditate, rerum totam minus.