UF1303 | UD01

UD01 | Hojas de estilo en la construcción de una página web

Bloque 1
Bloque 2
Bloque 3
Bloque 4
Bloque 5
Bloque 6
Bloque 7 | Pseudoelementos y pseudoclases

Pseudoelementos y pseudoclases

Pseudoelementos

Se presentan los pseudoelementos ::first-letter y ::first-line.

Pseudoelemento ::first-letter.
Ejemplo:

<p>Primera letra.</p>

p::first-letter{
    color: red;
}

Pseudoelemento ::first-line.
Ejemplo:

<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Obcaecati architecto recusandae non dolore nostrum
ut iusto omnis molestias dolorem fugit in dolores numquam
quos consequatur, quam quia aliquam id commodi.</p>

p::first-line{
    color: green;
}

G020-pseudoelementos-2.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan los pseudoelementos ::before y ::after.

Pseudoelemento ::before.
Ejemplo:

<span class="num-factura">12</span>

span.num-factura::before{
    content:"FAC #"
}

Pseudoelemento ::after.
Ejemplo:

<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Obcaecati architecto recusandae non dolore nostrum
ut iusto omnis molestias dolorem fugit in dolores numquam
quos consequatur, quam quia aliquam id commodi.</p>

.firma::after{
    content:" [Fdo: Fulanito]"
}

Pseudoelementos ::before y ::after combinados.
Ejemplo:

<blockquote
cite="https://developer.mozilla.org/es/docs/Web/CSS/::before">
    En CSS, ::before crea un pseudoelemento que es el
    primer hijo del elemento seleccionado. Es usado
    normalmente para añadir contenido estético a un
    elemento, usando la propiedad content. Este
    elemento se muestra en línea con el texto de
    forma predeterminada.
</blockquote>

/* Estilos  blockquote::before */ 
blockquote::before{
    content:"«"
}

/* Estilos .caja-roja p::after */ 
blockquote::after{
    content:"»"
}

Pseudoclases

Pseudo-clases basadas en el estado

G030-pseudoclases-estado.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta las pseudo-clases de estado.

Pseudo-clase :hover
Ejemplo:


<a class="ejemplo-hover" href="#">
    Intenta pasar el mouse sobre este enlace.
</a>

/* La pseudo-clase :hover se activa cuando el usuario se
desplaza sobre un elemento con el cursor */
.ejemplo-hover {
    background-color: silver;
}

Pseudo-clase :focus
Ejemplo:

<input class="ejemplo-focus" value="Cambio con el enfoque.">

/* La pseudo-clase :focus generalmente se activa cuando el usuario
hace clic, toca un elemento o lo selecciona con la tecla
tabulador. */
.ejemplo-focus {
    background-color: silver;
}

Pseudo-clases :link y :visited
Ejemplo:

<a href="#"<Esto es un enlace.</a>

/* La pseudo-clase :link CSS representa un elemento que
aún no se ha visitado.
La pseudo-clase :visited CSS representa un elemento que
ya ha sido visitado. */

a:link {
    color:brown;
}

a:visited {
    color:white;
}

Pseudo-clase target

G040-pseudoclases-target.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta la pseudo-clase :target

Ejemplo:

<p id="parrafo-1">
    Soy el párrafo 1. Lorem ipsum dolor sit amet
    consecteturadipisicing elit. Est velit nemo
    vero ducimus quas? Fugit, accusamus facilis
    autem consequatur et doloribus animi, ab
    voluptate excepturi nam maiores nihil. Cum,
    quia! Earum impedit nam animi quaerat
    voluptatibus sit deserunt ipsa minima aliquid.
</p>
<p id="parrafo-2">
    Soy el párrafo 1. Lorem ipsum dolor sit amet
    consecteturadipisicing elit. Est velit nemo
    vero ducimus quas? Fugit, accusamus facilis
    autem consequatur et doloribus animi, ab
    voluptate excepturi nam maiores nihil. Cum,
    quia! Earum impedit nam animi quaerat
    voluptatibus sit deserunt ipsa minima aliquid.
</p>

/* La pseudo-clase :target de CSS representa un
elemento único con un id que coincide con el
fragmento de la URL */
p:target{
    background-color: brown;
}

Pseudo-clase language

G050-pseudoclases-lang.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta la pseudo-clase :lang

Ejemplo:


<p lang="en">Hello world</p>
<p lang="it">Ciao mondo</p>
<p lang="fr">Bonjour le monde</p>

:lang(en){
    color:red;
}
:lang(fr){
    color:green;
}
:lang(de){
    color:blue;
}

Pseudo-clases estructurales

G060-pseudoclases-estructurales-root.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta la pseudo-clase :root.

Ejemplo:

<p>Ejemplo de párrafos>/p>

/* Estilos :root */
:root {
    --color-principal: orange;
}

p {
    color:var(--color-principal);
}

G070-pseudoclases-estructurales-nth-child.html

Se presenta la pseudo-clase :nth-child.

:nth-child(n) con valor entero.
Ejemplo:

/* Representa al elemento indicado por el valor
numérico. */
div p:nth-child(3) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-child(odd) Palabra clave odd.
Ejemplo:

/* Representa elementos cuya posición numérica en una
serie de hermanos es impar: 1, 3, 5, etc. */
div p:nth-child(odd) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-child(even) Palabra clave even.
Ejemplo:

/* Representa elementos cuya posición numérica en una
serie de hermanos es impar: 1, 3, 5, etc. */
div p:nth-child(even) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-child() Notación funcional (An+B).
Ejemplo:

/* Representa elementos cuya posición numérica en una
serie de hermanos coincide con el patrón An+B, para
cada entero positivo mayor o igual que cero. */
div p:nth-child(2n+3) {
    color: lime;
    /* Representa las filas impares de una tabla HTML:
    3, 5, 7, etc. */
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

G080-pseudoclases-estructurales-nth-of-type.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta la pseudo-clase :nth-of-type.

:nth-of-type(n) con valor entero.
Ejemplo:

/* Selecciona cada dos elementos <p>
entre cualquier grupo de hermanos. */
div p:nth-of-type(2n) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-of-type(odd) Palabra clave odd.
Ejemplo:

/* Selecciona cada los elementos <p>
impares entre cualquier grupo de hermanos */
div p:nth-of-type(odd) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-of-type(even) Palabra clave even.
Ejemplo:

/* Selecciona cada los elementos <p>
pares entre cualquier grupo de hermanos */
div p:nth-of-type(even) {
    color: lime;
}

<div>
    <p>Párrafo 1</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:nth-of-type() Notación funcional (An+B).
Ejemplo:

/* Representa elementos <p> cuya
posición numérica en una serie
de hermanos coincide con el
patrón An+B, para cada entero
positivo mayor o igual que
cero. */
div p:nth-of-type(2n+3) {
    color: lime;
    /* Representa los <p>: 3, 5, 7, etc. */
}

<div>
    <p>Párrafo 1</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

G090-pseudoclases-estructurales-first-child.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta las pseudo-clases :first-child y :last-child.

:first-child con valor entero.
Ejemplo:

/* Estilos div p:first-child */
div p:first-child {
    color: lime;
/* La pseudo-clase :first-child de CSS representa
el primer elemento entre un grupo de elementos
hermanos. */
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

:last-child con valor entero.
Ejemplo:

/* Estilos div p:last-child */
div p:last-child {
    color: lime;
/* La pseudo-clase :last-child de CSS representa
el último elemento entre un grupo de elementos
hermanos. */
}

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
</div>

G100-pseudoclases-estructurales-first-of-type.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta las pseudo-clases :first-of-type y :last-of-type.

:first-of-type.
Ejemplo:

div p:first-of-type {
    color: lime;
/* Selecciona el primer elemento de su tipo
   entre un grupo de elementos hermanos. */
}

<div>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <div>Este es un div y no se cuenta.</div>
</div>

:last-of-type.
Ejemplo:

div p:last-of-type {
    color: lime;
/* Selecciona el último elemento de su tipo
   entre un grupo de elementos hermanos. */
}

<div>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    <div>Este es un div y no se cuenta.</div>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <div>Este es un div y no se cuenta.</div>
</div>

G110-pseudoclases-estructurales-only-child.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta la pseudo-clase :only-child.

:only-child.
Ejemplo:

div p:only-child {
    color: lime;
/* Selecciona un elemento siempre y cuando no
   tenga hermanos. */
}

<div>
    <p>Párrafo 1</p>
</div>

Pseudo-clases UI States (:fullscreen)

G120-pseudoclases-ui-states.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan las pseudo-clases UI F120-pseudoclases-ui-states-enabled.

:enabled.
La pseudo-clase :enabled CSS representa cualquier elemento habilitado.
:disable.
La pseudo-clase :disable CSS representa cualquier elemento deshabilitado.
:checked.
La pseudo-clase :checked CSS representa cualquier elemento seleccionado.
:in-range.
La pseudo-clase :in-range CSS representa un elemento de tipo input que tiene un valor fuera de un rango determinado.
:required.
La pseudo-clase :required CSS representa un elemento de tipo input que es requerido por parte de un formulario.
:optional.
La pseudo-clase :optional CSS representa un elemento de tipo input que no es requerido.
:valid.
La pseudo-clase :valid CSS representa un elemento de tipo input que contiene un valor válido.
:invalid.
a pseudo-clase :invalid CSS representa un elemento de tipo input que contiene un valor inválido.

Ejemplo:

form input:enabled {
    color: darkslategrey;
}

form .casilla:checked {
    margin-right: 20px;
}

formo input:in-range {
    background-color: darkslategrey;
    color:white;
}

form input:out-of-range {
    background-color: brown;
    color:white;
}

form input:required {
    border: 2px dashed brown;
}

form input:optional {
    font-style: italic;
}

formo input:optional {
    font-style: italic;
}

form input:invalid {
    color:red;
}

form input:valid {
    color:green;
}

<!--
    Este ejercicio no sigue el orden lógico del
    aprendizaje.
    Es recomendable haber estudiado antes los formularios
    de HTML.
-->

<form  action="url_of_form">
    <p>Esto es un formulario</p>
    <label for="FirstField">
        Campo de texto (habilitado):
    </label>
    <input type="text" id="FirstField" value="Lorem"<br>
    
    <label for="SecondField">
        Campo de texto (deshabilitado):
    </label>
    <input type="text" id="SecondField" value="Ipsum"
    disabled="disabled"><br>
    
    <input type="checkbox" name="casilla-validación"
    id="casilla-validación"
    class="casilla">
    <label for="opt-in">
        Casilla de verificación
    </label><br>

    Los valores entre 1 y 10 son válidos.
    <input id="nota" name="nota" type="number"
    placeholder="1 a 10"
    min="1" max="10" value="0">
    <label for="nota">
        Introduce un valor
    </label><br>

    <label for="email_input">
        Correo electrónico:
    </label>
    <input class="correo" type="email" id="email_input"
    required>
</form>