Tironemota

▲
CSS

Selectores
16-07-2022

* (Selector universal) 16-07-2022

Selector universal

El selector * selecciona todos los elementos.

El selector * también puede seleccionar todos los elementos dentro de otro elemento.

Es un asterisco (*), el cual selecciona todo, no recomendado su uso.

*

<html>
<head>
    <title>Ejemplo Selector universal</title>
    <style>
    * {
        border: 2px solid blue;
        margin: 20px 30px 2px 1px;
        border-radius: 0 20px 0 0;
    }
    </style>
</head>
<body>
<main>&lt;main&gt;
    <div>&lt;div&gt;
        <article>&lt;article&gt;
            <section>&lt;section&gt;
                <aside>
                    &lt;aside&gt;
                </aside>
            </section>
        </article>
    </div>
</main>
</body>
</html>
<main>
<div>
<article>
<section>
Arriba ... ⇑

.class 16-07-2022

El selector .class selecciona elementos con un atributo de clase específico.

Para seleccionar elementos con una clase específica, escriba un carácter de punto (.) Seguido del nombre de la clase.

Selectores de clases. No pueden comenzar con número, ejemplo:

  • p
  • p2
  • -p
  • _p

También puede especificar que sólo los elementos HTML específicos deben verse afectados por una clase. Para ello, comience con el nombre del elemento, luego escriba el carácter de punto (.) Seguido del nombre de la clase.

Los elementos HTML también pueden referirse a más de una clase.

.Class

<html>
<head>
    <title>Ejemplo selector clase</title>
    <style>
        p.centro { text-align: center; }
        p.color { color: red; }
        p.grande { font-size: 200%; }
    </style>
</head>
<body>
<h2 class="centro">Este encabezado no será afectado</h2>
<p class="centro">Este párrafo estará alineado en el centro.</p>
<p class="centro color grande">Este párrafo será rojo, centrado, y fuente grande</p>
</body>
</html>

Este encabezado no será afectado

Este párrafo estará alineado en el centro.

Este párrafo será rojo, centrado, y fuente grande

Arriba ... ⇑

#id 16-07-2022

El selector #id selecciona el elemento con el id especificado. Identificador único, se identifican con un hash (#)

#id

<html>
<head>
    <title>Ejemplo identificador id</title>
    <style>
        #centro { text-align: center; }
        #color { color: red; }
        #grande { font-size: 200%; }
    </style>
</head>
<body>
<h2 id="centro">Este encabezado estará centrado</h2>
<p id="color">Este párrafo será de color rojo.</p>
<p id="grande">Este párrafo será de un tamaño de fuente grande</p>
</body>
</html>

Este encabezado estará centrado

Este párrafo será de color rojo.

Este párrafo será de un tamaño de fuente grande

Arriba ... ⇑

elemento 16-07-2022

Selecciona todos los elementos con el nombre de elemento especificado.

elemento

<html>
<head>
    <title>Ejemplo elementos</title>
    <style>
        div { background-color: #FCD3F7; }
        h2 { text-align: center; }
        span { color: red; }
        strong { color: blue; }
        p { border: 1px solid #0EFF03; }
    </style>
</head>
<body>
<div>
    <h2>Este encabezado estará <span>centrado</span></h2>
    <p>Elemento span será de <span>color rojo</span>.</p>
    <p>Elemento strong será de <strong>color azul</strong> y span de color <span>rojo</span>.</p>
</div>
<p>Los párrafos con borde verde</p>
</body>
</html>

Este encabezado estará centrado

Elemento span será de color rojo.

Elemento strong será de color azul y span de color rojo.

Los párrafos con borde verde

Arriba ... ⇑

elemento, elemento 16-07-2022

Para diseñar varios elementos con el mismo estilo, separe cada nombre de elemento con una coma (Agrupados).

elemento, elemento

<html>
<head>
    <title>Ejemplo elemento, elemento</title>
    <style>
        h1, p { text-align: center; }
        span, strong { color: blue; }
    </style>
</head>
<body>
<div>
    <h1>Los elementos &lt;h1&gt; y &lt;p&gt; tienen texto centrado</h1>
    <p>Elemento span será de <span>color azul</span>.</p>
    <p>Elemento strong será de <strong>color azul</strong>.</p>
</div>
</body>
</html>

Los elementos <h1> y <p> tienen texto centrado

Elemento span será de color azul.

Elemento strong será de color azul.

Arriba ... ⇑

elemento elemento 16-07-2022

El selector de elemento elemento se utiliza para seleccionar elementos dentro de elementos (Descendientes).

elemento elemento

<html>
<head>
    <title>Ejemplo elemento elemento</title>
    <style>
        div p { border: 2px solid blue; }
    </style>
</head>
<body>
<div>
    <h2>Selector elemento elemento</h2>
    <p>Primer párrafo</p>
    <p>Segundo parrafo</p>
</div>
<div>
    <section>
        <p>Otro párrafo</p>
    </section>
</div>
</body>
</html>

Selector elemento elemento

Primer párrafo

Segundo parrafo

Otro párrafo

Arriba ... ⇑

elemento > elemento 16-07-2022

El selector elemento > elemento se utiliza para seleccionar elementos con un padre específico (Hijo directo).

Nota: Los elementos que no son directamente un hijo del padre especificado, no están seleccionados.

elemento > elemento

<html>
<head>
    <title>Ejemplo elemento > elemento</title>
    <style>
        div > p { border: 2px solid blue; }
    </style>
</head>
<body>
<div>
    <h2>Selector elemento &gt; elemento</h2>
    <p>Todos los elementos &lt;p&gt; donde el padre es un elemento &lt;div&gt;.</p>
    <p>Tendrán un borde azul.</p>
</div>
<div>
    <section>
        <p>Los elementos &lt;p&gt; de este elemento &lt;div&gt; No tienen estilos.</p>
    </section>
</div>
<p>Los elemento &lt;p&gt; que no son hijos de elemento &lt;div&gt; tampoco tienen el estilo</p>
</body>
</html>

Selector elemento > elemento

Todos los elementos <p> donde el padre es un elemento <div>.

Tendrán un borde azul.

Los elementos <p> de este elemento <div> No tienen estilos.

Los elemento <p> que no son hijos de elemento <div> tampoco tienen el estilo

Ejemplo: ocultar sub menú

<html>
<head>
    <title>Ejemplo elemento > elemento</title>
    <style>
        li > ul { display: none; }
        li:hover ul { display: block; }
    </style>
</head>
<body>
<ul>
    <li>Items 1</li>
    <li>Items 2</li>
    <li>Items 3
        <ul>
            <li>Items 3-1</li>
            <li>Items 3-2</li>
        </ul>
    </li>
</ul>
</body>
</html>

Pose el puntero sobre Items 3

  • Items 1
  • Items 2
  • Items 3
    • Items 3-1
    • Items 3-2
Arriba ... ⇑

elemento + elemento 16-07-2022

El selector elemento + elemento se utiliza para seleccionar elementos que se coloca inmediatamente después (no dentro) el primer elemento especificado (Hermano siguiente).

elemento + elemento

<html>
<head>
<style>
    div + p { background-color: yellow; }
</style>
</head>
<body>
<div>
    <h2>Selector elemento + elemento</h2>
    <p>Todos los elementos &lt;p&gt; donde el padres es un elemento &lt;div&gt;</p>
    <p>No tendrán estilo</p>
</div>
<p>El primer elemento &lt;p&gt; después del elemento &lt;div&gt; asumirá el estilo.</p>
<p>Los elementos &lt;p&gt; siguientes no tienen estilos.</p>
<p>Otro elemento &lt;p&gt; sin estilo</p>
</body>
</html>

Selector elemento + elemento

Todos los elementos <p> donde el padres es un elemento <div>

No tendrán estilo

El primer elemento <p> después del elemento <div> asumirá el estilo.

Los elementos <p> siguientes no tienen estilos.

Otro elemento <p> sin estilo

Arriba ... ⇑

elemento1 ~ elemento2 16-07-2022

El selector element1 ~ element2 coincide con las apariciones de element2 precedidas por element1 (Hermanos siguientes).

Ambos elementos deben tener el mismo padre, pero element2 no tiene que ser precedido inmediatamente por element1.

elemento1 ~ elemento2

<html>
<head>
<style>
    p ~ ul { background-color: yellow; }
</style>
</head>
<body>
<div>Un elemento div.</div>
<ul>
    <li>Gato</li>
    <li>Perro</li>
</ul>
<p>El primer párrafo.</p>
<ul>
    <li>Gallina</li>
    <li>Ganzo</li>
</ul>
<h3>Otra lista</h3>
<ul>
    <li>Burro</li>
    <li>Caballo</li>
</ul>
</body>
</html>
Un elemento div.
  • Gato
  • Perro

El primer párrafo.

  • Gallina
  • Ganzo

Otra lista

  • Burro
  • Caballo
Arriba ... ⇑

Selectores descendientes 16-07-2022

Selectores descendientes

  • Ejemplo: ul li {………….} no se recomienda
  • Espacios aplica al descendiente
    • ul span {……} /*descendiente*/
    • .list .tag {……} /*descendiente*/
  • Sin espacio debe contener las dos clases
    • .list.tag {……}
    • ul.list {……}
Arriba ... ⇑

[atributo] 16-07-2022

El selector [atributo] se utiliza para seleccionar elementos con el atributo especificado.

[atributo]

<html>
<head>
<style>
    li[dir] { color: blue; }
    li[id] { color: red; }
    li[title] { color: orange; }
</style>
</head>
<body>
<ul>
    <li dir="ltr">Caballo</li>
    <li id="gato">Gato</li>
    <li title="Perro">Perro</li>
    <li id="Sapo">Sapo</li>
</ul>
</body>
</html>
  • Caballo
  • Gato
  • Perro
  • Sapo
Arriba ... ⇑

[atributo=valor] 16-07-2022

El selector [atributo=valor] se utiliza para seleccionar elementos con el atributo y el valor especificados.

[atributo=valor]

<html>
<head>
<style>
    li[id=Yegua] { color: blue; }
</style>
</head>
<body>
<ul>
    <li id="Caballo">Caballo</li>
    <li id="Potro">Potro</li>
    <li id="Yegua">Yegua</li>
</ul>
</body>
</html>
  • Caballo
  • Potro
  • Yegua
Arriba ... ⇑

[atributo~=valor] 16-07-2022

El selector [atributo~=valor] se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra especificada.

[atributo~=valor]

<html>
<head>
<style>
    [id~=Cangrejo] { color: blue; }
</style>
</head>
<body>
<ul>
    <li id="Cangrejo">Cangrejo</li>
    <li id="Calamar">Calamar</li>
    <li id="Sardina">Sardina</li>
    <li id="Pulpo">Pulpo</li>
</ul>
</body>
</html>
  • Cangrejo
  • Calamar
  • Sardina
  • Pulpo
Arriba ... ⇑

[atributo|=valor] 16-07-2022

El selector [atributo|=valor] se utiliza para seleccionar elementos con el atributo especificado comenzando con el valor especificado.

Nota: El valor tiene que ser una palabra entera, solo, como lang = "en", o seguido de un guión (-), como lang = "en-us".

[atributo|=valor]

<html>
<head>
<style>
    [title|=ejem] { color: blue; }
</style>
</head>
<body>
<ul>
    <li title="ejem">Cangrejo</li>
    <li title="ejem-2">Calamar</li>
    <li title="otro">Sardina</li>
    <li title="ejem-otro">Pulpo</li>
</ul>
</body>
</html>
  • Cangrejo
  • Calamar
  • Sardina
  • Pulpo
Arriba ... ⇑

[atributo^=valor] 16-07-2022

El selector [atributo^=valor] coincide con cada elemento cuyo valor de atributo comience con un valor especificado.

[atributo^=valor]

<html>
<head>
<style>
    ul [class^=animal] { color: blue; }
    [class^=mas] { color: red; }
</style>
</head>
<body>
<ul>
    <li class="animal">Cangrejo</li>
    <li class="animal-s">Calamar</li>
    <li class="mas">medusa</li>
    <li class="otro">Sardina</li>
</ul>
<p class="mas-s">Camaron<p>
</body>
</html>
  • Cangrejo
  • Calamar
  • medusa
  • Sardina

Camaron

Arriba ... ⇑

[atributo$=valor] 16-07-2022

El selector [atributo $ = valor] compara cada elemento cuyo valor de atributo termina con un valor especificado.

[atributo$=valor]

<html>
<head>
<style>
    [class$=s] { background: #C8FBCB; }
    [class$=o] { border: 1px solid red; }
</style>
</head>
<body>
<ul>
    <li class="animal">Cangrejo</li>
    <li class="animal-s">Calamar</li>
    <li class="otro">medusa</li>
    <li class="mas">Sardina</li>
</ul>
<p class="otro-s">Camaron<p>
</body>
</html>
  • Cangrejo
  • Calamar
  • medusa
  • Sardina

Camaron

Arriba ... ⇑

[atributo*=valor] 16-07-2022

El selector [atributo*=valor] coincide con cada elemento cuyo valor de atributo contenga un valor especificado.

[atributo*=valor]

<html>
<head>
<style>
    [class*=ani] { background: #C8FBCB; }
</style>
</head>
<body>
<ul>
    <li class="animal">Cangrejo</li>
    <li class="animal-s">Calamar</li>
    <li class="anidado">medusa</li>
    <li class="mas">Sardina</li>
</ul>
<p class="otro-ani">Camaron<p>
<p class="canino">Perro<p>
</body>
</html>
  • Cangrejo
  • Calamar
  • medusa
  • Sardina

Camaron

Perro

Arriba ... ⇑

:active 16-07-2022

El selector :active se utiliza para seleccionar y diseñar el enlace activo.

Un enlace se activa cuando se hace clic en él.

Consejo: El selector active se puede utilizar en todos los elementos, no sólo en los enlaces.

Sugerencia:

  • utilice el selector :link para vincular los estilos a las páginas no visitadas,
  • el selector :visited para vincular los estilos a las páginas visitadas y
  • el selector :hover a los enlaces de estilo al pasar el ratón sobre ellos.

Nota: :active debe venir después de :hover (si está presente) en la definición CSS para ser eficaz!

:active

<html>
<head>
<style>
p:active,
h2:active,
a:active { background: yellow; }
</style>
</head>
<body>
<h2>Mantenga pulsado botón izquierdo del puntero</h2>
<p>Sobre los párrafos, encabezados y vínculos para ver qué es lo que está obteniendo un estilo.</p>
<h3>Enlaces</h3>
<a href="#active">Enlace-1</a>
<a href="#active">Enlace-2</a>
<a href="#active">Enlace-3</a>
</body>
</html>

Mantenga pulsado botón izquierdo del puntero

Sobre los párrafos, encabezados y vínculos para ver qué es lo que está obteniendo un estilo.

Enlaces

Enlace-1 Enlace-2 Enlace-3
Arriba ... ⇑

:blank 16-07-2022

No debe usarse debido que está en proceso experimental.

Arriba ... ⇑

:checked 16-07-2022

El selector :checked coincide con cada elemento <input> marcado (sólo para los botones de opción y las casillas de verificación) y el elemento <option>.

:checked

<html>
<head>
<style>
    input:checked {
        height: 50px;
        width: 50px;
    }
</style>
</head>
<body>
<p>Cambie las opciones para ver el estilo.</p>
<form action="">
    <input type="radio" checked="checked" value="Si" name="opt"> Si<br>
    <input type="radio" value="No" name="opt"> No<br>
    <input type="checkbox" checked="checked" value="Bicicleta"> Tengo una bicicleta<br>
    <input type="checkbox" value="Carro"> Tengo un carro
</form>
</body>
</html>

Cambie las opciones para ver el estilo.

Si
No
Tengo una bicicleta
Tengo un carro
Arriba ... ⇑

:default 16-07-2022

La pseudo-clase :default de CSS representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.

Este selector se puede usar en los elementos <button>, <input type="checkbox">, <input type="radio"> y <option>.

:default

<html>
<head>
<style>
    input:default{ box-shadow: 0 0 2px 1px coral; }
    input:default + label{ color: coral; }
</style>
</head>
<body>
<div>
    <input type="radio" name="temporada" id="primavera">
    <label for="primavera">Primavera</label><br>
    <input type="radio" name="temporada" id="verano" checked>
    <label for="verano">Verano</label><br>
    <input type="radio" name="temporada" id="otoño">
    <label for="otoño">Otoño</label><br>
    <input type="radio" name="temporada" id="invierno">
    <label for="invierno">Invierno</label>
</div>
</body>
</html>



Arriba ... ⇑

:defined 16-07-2022

No debe usarse debido que está en proceso experimental.

La pseudo-clase :defined de CSS representa cualquier elemento que se haya definido. Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método CustomElementRegistry.define()).

Arriba ... ⇑

:dir() 16-07-2022

Esta es una tecnología experimental

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como direction.

Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML dir e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por user agent, incluso si se hereda.

Sintaxis: La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.
:dir( ltr | rtl )

Parámetros:

  • ltr Orientar elementos de izquierda a derecha.
  • rtl Orientar elementos de derecha a izquierda.
Arriba ... ⇑

:disabled 16-07-2022

El selector :disabled hace coincidir cada elemento deshabilitado (utilizado principalmente en elementos de formulario).

:disabled

<html>
<head>
<style>
    option:disabled { background: red; }
    [value=alazan]:disabled { background: #FBBBBC; }
</style>
</head>
<body>
<form action="">
    <select name="select">
        <option value="Elemento-1">Elemento-1</option>
        <option value="Elemento-2" disabled>Elemento-2</option>
        <option value="Elemento-3">Elemento-3</option>
        <option value="Elemento-4" disabled>Elemento-4</option>
        <option value="Elemento-5">Elemento-5</option>
    </select><br><br>
    Su nombre: <input type="text" value="nombre"><br><br>
    País: <input type="text" value="Venezuela" disabled><br><br>
    Caballo: <input type="text" value="alazan" disabled>
</form>
</body>
</html>


Su nombre:

País:

Caballo:
Arriba ... ⇑

:empty 17-07-2022

El selector :empty corresponde a todos los elementos que no tienen hijos (incluidos los nodos de texto).

:empty

<html>
<head>
<style>
p:empty {
    width: 100px;
    height: 20px;
    background: #ff0000;
}
</style>
</head>
<body>
<p></p>
<p>Segundo parrafo</p>
<p>&nbsp;</p>
<p>Cuarto parrafo</p>
<p></p>
<p>Sexto párrafo</p>
</body>
</html>

Segundo parrafo

 

Cuarto parrafo

Sexto párrafo

Arriba ... ⇑

:enabled 17-07-2022

El selector :enabled hace coincidir cada elemento activado (utilizado principalmente en elementos de formulario).

:enabled

<html>
<head>
<style>
input:enabled { background: #ffff00; }
input:disabled { background: #dddddd; cursor: no-drop; }
</style>
</head>
<body>
<form action="">
    Nombre: <input type="text" name="nombre" value="Tirone"><br>
    Apellido: <input type="text" name="apellido" value="Mota"><br>
    País: <input type="text" name="pais" value="Venezuela" disabled><br>
    Password: <input type="password" name="password" value="password" disabled><br>
    E-mail: <input type="email" name="email" value="tironemota@gmail.com">
</form>
</body>
</html>
Nombre:
Apellido:
País:
Password:
E-mail:
Arriba ... ⇑

:first 17-07-2022

La pseudo-clase :first de CSS, utilizada con la regla-at @page, representa la primera página de un documento impreso.

  • /* Selecciona la primera página al imprimir */
  • @page :first {
  • margin-left: 50%;
  • margin-top: 50%;
  • }

Nota: No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes y saltos de página del documento. Además, solo puede usar unidades de longitud absoluta al definir los márgenes. Todas las otras propiedades serán ignoradas.

Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.

:first

<html>
<head>
<style>
@page :first { margin-left: 50%; margin-top: 50%; }
p { page-break-after: always; }
</style>
</head>
<body>
<p>Primera página.</p>
<p>Segunda página.</p>
<button>Imprimir!</button>
<script>
document.querySelector("button").onclick = function () {
    window.print();
}
</script>
</body>
</html>
Arriba ... ⇑

:first-child 17-07-2022

El selector :first-child se utiliza para seleccionar el selector especificado, sólo si es el primer hijo de su padre.

:first-child

<html>
<head>
<style>
ul > :first-child { background: yellow; }
li:first-child { border: 2px solid red; }
p:first-child { color: red; }
</style>
</head>
<body>
<ul>
    <li>Fresa</li>
    <li>Limón</li>
    <li>Naranja</li>
</ul>
<ol>
    <li>Caballo</li>
    <li>Gato</li>
    <li>Perro</li>
</ol>
<div>
    <p>Mi primer parrafo</p>
    <p>Segundo parrafo</p>
</div>
</body>
</html>
  • Fresa
  • Limón
  • Naranja
  1. Caballo
  2. Gato
  3. Perro

Mi primer parrafo

Segundo parrafo

Arriba ... ⇑

:first-of-type 17-07-2022

El selector :first-of-type corresponde a cada elemento que es el primer hijo, de un tipo particular, de su padre.

Consejo: Este es el mismo que :nth-of-type(n).

:first-of-type

<html>
<head>
<style>
p:first-of-type {
    background-color: yellow;
}
</style>
</head>
<body>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>
<div>
    <p>Primer párrafo del div</p>
    <p>Segundo párrafo del div</p>
</div>
</body>
</html>

Primer párrafo

Segundo párrafo

Tercer párrafo

Primer párrafo del div

Segundo párrafo del div

Arriba ... ⇑

:focus 17-07-2022

El selector :focus se utiliza para seleccionar el elemento que tiene el enfoque.

Sugerencia: El selector de enfoque está permitido en elementos que aceptan eventos de teclado u otras entradas de usuario.

:focus

<html>
<head>
<style>
input:focus { background-color: yellow; }
</style>
</head>
<body>
<p>Haga clic dentro de los campos de texto para ver un fondo amarillo:</p>
<form>
    Nombre: <input typ2e="te2xt" nam2e="nomb2re"><br><br>
    Apellido: <input typ2e="te2xt" nam2e="apelli2do">
</form>
</body>
</html>

Haga clic dentro de los campos de texto para ver un fondo amarillo:

Nombre:

Apellido:
Arriba ... ⇑

:focus-within 17-07-2022

Este selector es útil, por poner un ejemplo común, para resaltar un <form> contenedor completo cuando el usuario se enfoca en uno de sus <input> campos.

:focus-within

<html>
<head>
<style>
form {
    border:1px solid;
    color:gray;
    padding:4px;
    width:80%;
    margin:20px auto;
}
form:focus-within {
    background:#ff8;
    color:black;
}
input { margin:4px; }
</style>
</head>
<body>
<p>Intenta escribir en este formulario.</p>
<form>
    <label for="nombre">Nombre:</label>
    <input id="nombre" type="text">
    <br>
    <label for="apellido">Apellido:</label>
    <input id="apellido" type="text">
</form>
</body>
<html>

Intenta escribir en este formulario.


Arriba ... ⇑

:fullscreen 17-07-2022

La pseudo-clase :fullscreen de CSS representa un elemento que se muestra cuando el navegador está en modo de pantalla completa.

Nota: La especificación W3C usa la palabra única :fullscreen, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: :fullscreen y :-ms-fullscreen, respectivamente.

:fullscreen

<html>
<head>
<style>
#fullscreen:-moz-full-screen{padding:42px;background-color:pink;border:2px solid #f00;font-size:200%;}
#fullscreen:-webkit-full-screen{padding:42px;background-color:pink;border:2px solid #f00;font-size:200%;}
#fullscreen:-moz-full-screen > h1 {color:red;}
#fullscreen:-webkit-full-screen > h1 {color:red;}
#fullscreen:-moz-full-screen > p {color:darkred;}
#fullscreen:-webkit-full-screen > p {color:darkred;}
#fullscreen:-moz-full-screen > button {display:none;}
#fullscreen:-webkit-full-screen > button {display:none;}
#fullscreen:fullscreen{padding:42px;background-color:pink;border:2px solid#f00;font-size:200%;}
#fullscreen:fullscreen > h1 {color:red;}
#fullscreen:fullscreen > p {color:darkred;}
#fullscreen:fullscreen > button {display:none;}
</style>
</head>
<body>
<div id="fullscreen">
    <h1>Demostración :fullscreen</h1>
    <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p>
    <button id="fullscreen-button">Entrar en pantalla completa</button>
</div>
<script>
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv    = document.getElementById("fullscreen");
var fullscreenFunc   = fullscreenDiv.requestFullscreen;
if (!fullscreenFunc) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach(function (req) {
fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
});
}
function enterFullscreen() {
fullscreenFunc.call(fullscreenDiv);
}
fullscreenButton.addEventListener('click', enterFullscreen);
</script>
</body>
</html>
Arriba ... ⇑

:has 17-07-2022

Esta es una tecnología experimental

La pseudo-class CSS :has() representa un elemento si cualquiera de los selectores, en relación con el :scope del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :has() tomo un selector como argumento.

:has(selector_list) { propiedades de estilo }
El siguiente selector selecciona únicamente los elementos <a> que contienen <img> hijo: 
a:has(> img)
Arriba ... ⇑

:hover 17-07-2022

El selector :hover se utiliza para seleccionar elementos cuando se pasa el mouse sobre ellos. Se puede utilizar en todos los elementos, no sólo en los enlaces.

Utilice el selector :link para vincular estilos a páginas no visitadas, el selector :visited para vincular los estilos a las páginas visitadas y el selector :active para dar estilo al vínculo activo.

Nota: :hover DEBE venir después de :link y :visited (si están presentes) en la definición CSS, para ser eficaz!

:hover

<html>
<head>
<style>
p:hover, h1:hover, a:hover {
    background-color : yellow;
}
</style>
</head>
<body>
<h1>Selector <em>:hover</em></h1>
<p>Funciona al colocar el puntero sobre el elemento.</p>
<h2>Selectores para vinculos</h2>
<ul>
    <li><a href="#:link"><em>:link</em></a></li>
    <li><a href="#:visited"><em>:visited</em></a></li>
    <li><a href="#:active"><em>:active</em></a></li>
</ul>
</body>
</html>

Selector :hover

Funciona al colocar el puntero sobre el elemento.

Selectores para vinculos

:hover

<html>
<head>
<style>
#div1:hover { color: red; }
#div2:hover { font-size: 2em; }
#div3:hover { background-color: red; }
#div4:hover { font-family: monospace; }
</style>
</head>
<body>
<h3>Funciona al colocar el puntero sobre el elemento.</h3>
<div id="div1">Este div cambia de color</div>
<div id="div2">Este div cambia el tamaño de la fuente</div>
<div id="div3">Este div cambia el color de fondo</div>
<div id="div4">Este div cambia la fuente</div>
</body>
</html>

Funciona al colocar el puntero sobre el elemento.

Este div cambia de color
Este div cambia el tamaño de la fuente
Este div cambia el color de fondo
Este div cambia la fuente

:hover

<html>
<head>
<style>
#divOculto {
    background-color: yellow;
    padding: 20px;
    display: none;
}
h3:hover + #divOculto {
    display: block;
    box-sizing: border-box;
}
</style>
</head>
<body>
<h3>¡Pasa el cursor sobre mí!</h3>
<div id="divOculto">Este div se hace visible</div>
</body>
</html>

¡Pasa el cursor sobre mí!

Este div se hace visible
Arriba ... ⇑

:in-range 17-07-2022

El selector :in-range selecciona todos los elementos con un valor que está dentro de un rango especificado.

Nota: El selector :in-range sólo funciona para elementos con limitaciones de rango, como elementos de entrada con atributos min y max.

Sugerencia: Utilice el selector :out-of-range para seleccionar todos los elementos con un valor que esté fuera de un rango especificado.

:in-range

<html>
<head>
<style>
input { background-color: #FEBCBC; }
input:in-range { background-color: #E5FBE7; }
</style>
</head>
<body>
<h3>Una demostración del selector <em>:in-range</em>.</h3>
<form>
<input type="number" max="10" min="5" value="7">
</form>
</body>
</html>

Una demostración del selector :in-range.

Intente escribir un número fuera del rango (menos de 5 o más de 10), para ver el estilo desaparecer.
Nota: El selector :in-range no es compatible con Internet Explorer
Arriba ... ⇑

:invalid 17-07-2022

El selector :invalid selecciona los elementos de formulario con un valor que no se valida de acuerdo con la configuración del elemento.

El selector :invalid sólo funciona para elementos de formulario con limitaciones, como elementos de entrada con atributos min y max, campos de correo electrónico sin correo electrónico legal o campos numéricos sin valor numérico, etc.

Utilice el selector :valid para seleccionar elementos de formulario con un valor que se valide de acuerdo con la configuración del elemento.

:invalid

<html>
<head>
<style>
input:invalid { background-color: #FEBCBC; }
</style>
</head>
<body>
<h3>Una demostración del selector :invalid.</h3>
<form>
    <input type="email" value="ejemploEmail">
</form>
</body>
</html>

Una demostración del selector :invalid.

Intente escribir una dirección de correo electrónico legal para ver el estilo desaparecer.
Nota: El selector :invalid no es compatible con Internet Explorer 9 y versiones anteriores.
Arriba ... ⇑

:lang(idioma) 17-07-2022

El selector :lang(idioma) se utiliza para seleccionar elementos con un atributo lang con el valor especificado.

Nota: El valor del atributo lang es más a menudo un código de idioma de dos letras, como lang = "fr" (para el francés), o dos códigos de idioma combinados, como lang = "fr-ca" (para el francés canadiense).

:lang(idioma)

<html>
<head>
<style>
    span:lang(es) { background: #FBF8BC; }
    span:lang(en) { background: #C3FBC1; }
    span:lang(fr) { background: #B4F5F2; }
    span:lang(it) { background: #F5D8B8; }
</style>
</head>
<body>
<h3>Yo vivo en Venezuela.</h3>
<p>Español: <span lang="es">Bien venidos</span></p>
<p>Ingles: <span lang="en">Welcome</span></p>
<p>Fances: <span lang="fr">sont les bienvenus</span></p>
<p>Italiano: <span lang="it">sono i benvenuti</span></p>
</body>
</html>

Yo vivo en Venezuela.

Español: Bien venidos

Ingles: Welcome

Fances: sont les bienvenus

Italiano: sono i benvenuti

Arriba ... ⇑

:last-child 17-07-2022

El selector :last-child compara cada elemento que es el último hijo de su padre.

El selector :last-child es igual a :nth-last-child(n).

:last-child

<html>
<head>
<style>
    p:last-child { background: #F4BFC0; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<div>
    <p>El primer párrafo del div.</p>
    <p>El segundo párrafo del div.</p>
    <p>El tercer párrafo del div.</p>
    <p>El cuarto párrafo del div.</p>
</div>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El primer párrafo del div.

El segundo párrafo del div.

El tercer párrafo del div.

El cuarto párrafo del div.

Arriba ... ⇑

:last-of-type 17-07-2022

El selector :last-of-type hace coincidir cada elemento que es el último hijo, de un tipo particular, de su padre.

El selector :last-of-type es igual a :nth-last-of-type(n).

:last-of-type

<html>
<head>
<style>
    p:last-of-type { background: #F4BFC0; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<div>
    <p>El primer párrafo del div.</p>
    <p>El segundo párrafo del div.</p>
    <p>El tercer párrafo del div.</p>
    <p>El cuarto párrafo del div.</p>
</div>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El primer párrafo del div.

El segundo párrafo del div.

El tercer párrafo del div.

El cuarto párrafo del div.

Arriba ... ⇑

:not(selector) 17-07-2022

El selector :not(selector) coincide con cada elemento que NO es el elemento del selector especificado.

:not(selector)

<html>
<head>
<style>
    /* Aplica a todos los elementos menos <p> */
    :not(p) { color: red; }
</style>
</head>
<body>
<h2>Este es un encabezado</h2>
<p>Este es un párrafo.</p>
<p>Este es un párrafo.</p>
<div>Este es un texto en un elemento div.</div>
<a href="#:not(selector)">Este es un enlace</a>
</body>
</html>

Este es un encabezado

Este es un párrafo.

Este es un párrafo.

Este es un texto en un elemento div.
Este es un enlace
Arriba ... ⇑

:nth-child(n) 17-07-2022

El selector :nth-child(n) coincide con cada elemento que es el n-ésimo hijo, independientemente del tipo, de su padre.

N puede ser un número, una palabra clave o una fórmula.

Observe el selector :nth-of-type(n) para seleccionar el elemento que es el n-ésimo hijo, de un tipo particular, de su padre.

Nota: Internet Explorer 8 y versiones anteriores no admiten el selector :nth-child(n).

:nth-child(odd)

<html>
<head>
<style>
    /*Impares color salmón*/
    p:nth-child(odd) { background: salmon; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

:nth-child(even)

<html>
<head>
<style>
    /*Pares color lavanda*/
    p:nth-child(even) { background: lavender; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

:nth-child(3n+0)

<html>
<head>
<style>
    /*Cada tercer párrafo borde azul*/
    p:nth-child(3n+0) { border: 3px solid blue; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

:nth-child(4)

<html>
<head>
<style>
    /*El cuarto párrafo borde verde*/
    p:nth-child(4) { border: 5px solid lime; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Arriba ... ⇑

:nth-last-child(n) 17-07-2022

El selector :nth-last-child(n) coincide con cada elemento que es el n-ésimo niño, independientemente del tipo, de su padre, contando desde el último hijo.

n puede ser un número, una palabra clave o una fórmula.

Observe el selector :nth-last-of-type(n) para seleccionar el elemento que es el n-ésimo hijo, de un tipo especificado, de su padre, contando desde el último hijo.

Internet Explorer 8 y versiones anteriores no son compatibles con el selector :nth-last-child(n)

:nth-last-child(2)

<html>
<head>
<style>
/*El segundo párrafo, contando desde el último hijo borde verde*/
p:nth-last-child(2) { border: 5px solid lime; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Especifique un color de borde para cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo

:nth-last-child(3n+0)

<html>
<head>
<style>
    /*Cada tercer párrafo borde azul*/
    p:nth-last-child(3n+0) { border: 5px solid blue; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Utilizando una fórmula (an + b). Descripción: a representa un tamaño de ciclo, n es un contador (comienza en 0), y b es un valor de desplazamiento. Aquí especificamos un color de borde para todos los elementos p cuyo índice es un múltiplo de 3, contando desde el último hijo:

:nth-last-child(odd)

<html>
<head>
<style>
    /*Impares color salmón*/
    p:nth-last-child(odd) { background: salmon; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

odd palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es impar, contando desde el último hijo.

:nth-last-child(even)

><html>
<head>
<style>
    /*Pares color lavanda*/
    p:nth-last-child(even) { background: lavender; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

even palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es par, contando desde el último hijo.

Arriba ... ⇑

:nth-last-of-type(n) 17-07-2022

El selector :nth-last-of-type(n) coincide con cada elemento que es el n-ésimo hijo, de un tipo particular, de su padre, contando desde el último hijo.

n puede ser un número, una palabra clave o una fórmula.

Observe el selector :nth-last-child() para seleccionar el elemento que es el n-ésimo hijo, independientemente del tipo, de su padre, contando desde el último hijo.

Internet Explorer 8 y versiones anteriores no admiten el selector :nth-last-of-type(n).

nth-last-of-type(2)

<html>
<head>
<style>
    /*El segundo párrafo borde verde*/
    p:nth-last-of-type(2) { border: 5px solid lime; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Especifique un color de borde para cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo

:nth-last-of-type(3n+0)

<html>
<head>
<style>
    /*Cada tercer párrafo borde azul*/
    p:nth-last-of-type(3n+0) { border: 5px solid blue; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Utilizando una fórmula (an + b). Descripción: a representa un tamaño de ciclo, n es un contador (comienza en 0), y b es un valor de desplazamiento. Aquí especificamos un color de borde para todos los elementos p cuyo índice es un múltiplo de 3, contando desde el último hijo:

:nth-last-of-type(odd)

<html>
<head>
<style>
    /*Impares color salmón*/
    p:nth-last-of-type(odd) { background: salmon; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

odd palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es impar, contando desde el último hijo.

:nth-last-of-type(even)

<html>
<head>
<style>
    /*Pares color lavanda*/
    p:nth-last-of-type(even) { background: lavender; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

even palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es par, contando desde el último hijo.

Arriba ... ⇑

:nth-of-type(n) 17-07-2022

El selector :nth-of-type(n) coincide con cada elemento que es el n-ésimo hijo, de un tipo particular, de su padre.

n puede ser un número, una palabra clave o una fórmula.

Observe el selector :nth-child(n) para seleccionar el elemento que es el n-ésimo hijo, independientemente del tipo, de su padre.

:nth-of-type(2)

<html>
<head>
<style>
    /*El segundo párrafo borde verde*/
    p:nth-of-type(2) { border: 5px solid lime; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Especifique un color de borde para cada elemento <p> que sea el segundo hijo de su padre.

:nth-of-type(3n+0)

<html>
<head>
<style>
    /*Cada tercer párrafo borde azul*/
    p:nth-of-type(3n+0) { border: 5px solid blue; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

Utilizando una fórmula (an + b). Descripción: a representa un tamaño de ciclo, n es un contador (comienza en 0), y b es un valor de desplazamiento. Aquí especificamos un color de borde para todos los elementos p cuyo índice es un múltiplo de 3.

:nth-of-type(odd)

<html>
<head>
<style>
    /*Impares color salmón*/
    p:nth-of-type(odd) { background: salmon; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

odd palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es impar.

:nth-of-type(even)

<html>
<head>
<style>
    /*Pares color lavanda*/
    p:nth-of-type(even) { background: lavender; }
</style>
</head>
<body>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p>El decimo párrafo.</p>
</body>
</html>

El primer párrafo.

El segundo párrafo.

El tercer párrafo.

El cuarto párrafo.

El quinto párrafo.

El sexto párrafo.

El séptimo párrafo.

El octavo párrafo.

El noveno párrafo.

El decimo párrafo.

even palabras clave que se pueden utilizar para coincidir con elementos secundarios cuyo índice es par.

Arriba ... ⇑

:only-child 17-07-2022

El selecto :only-child compara cada elemento que sea el único hijo de su padre.

Internet Explorer 8 y versiones anteriores no son compatibles con el selector only-child.

:only-child

<html>
<head>
<style>
    p:only-child { background: yellow; }
</style>
</head>
<body>
<div>
    <p>El párrafo del div 1.</p>
</div>
<div>
    <p>El primer párrafo del div 2.</p>
    <p>El segundo párrafo del div 2.</p>
</div>
<div>
    <p>El párrafo. del div 3.</p>
</div>
</body>
</html>

El párrafo del div 1.

El primer párrafo del div 2.

El segundo párrafo del div 2.

El párrafo. del div 3.

Arriba ... ⇑

:only-of-type 17-07-2022

El selector :only-of-type coincide con cada elemento que es el único hijo de su tipo, de su padre.

:only-of-type

<html>
<head>
<style>
    p:only-of-type { background: yellow; }
</style>
</head>
<body>
<div>
    <p>El párrafo del div 1.</p>
</div>
<div>
    <p>El primer párrafo del div 2.</p>
    <p>El segundo párrafo del div 2.</p>
</div>
<div>
    <p>El párrafo. del div 3.</p>
</div>
</body>
</html>

El párrafo del div 1.

El primer párrafo del div 2.

El segundo párrafo del div 2.

El párrafo. del div 3.

Arriba ... ⇑

:optional 17-07-2022

El selector :optional selecciona elementos de formulario que son opcionales.

Los elementos de formulario sin atributo obligatorio se definen como opcionales.

El selector :optional sólo se aplica a los elementos del formulario: input, select y textarea.

Consejo: Utilice el selector :required para seleccionar los elementos del formulario que son necesarios.

:optional

<html>
<head>
<style>
    input:optional { background-color: yellow; }
</style>
</head>
<body>
<h3>Una demostración del selector opcional.</h3>
<p>Un elemento:<br><input></p>
<p>Un elemento:<br><input required></p>
</body>
</html>
Nota: El selector :optional no es compatible con Internet Explorer 9 ni versiones anteriores.

Una demostración del selector opcional.

Un elemento:

Un elemento:

El selector :optional selecciona elementos de formulario sin atributo "required".
Arriba ... ⇑

:out-of-range 17-07-2022

El selector :out-of-range selecciona todos los elementos con un valor que está fuera de un rango especificado.

El selector :out-of-range sólo funciona para elementos con limitaciones de rango, como elementos de entrada con atributos min y max.

Sugerencia: Utilice el selector :in-range para seleccionar todos los elementos con un valor dentro de un rango especificado.

:out-of-range

<html>
<head>
<style>
    input { background-color: #E5FBE7; }
    input:out-of-range { background-color: #FEBCBC; }
</style>
</head>
<body>
<h3>Una demostración del selector <em>:out-of-range</em>.</h3>
<form>
    <input type="number" max="10" min="5" value="17">
</form>
</body>
</html>

Una demostración del selector :out-of-range.

Intente escribir un número dentro del rango dado (entre 5 y 10), para ver el estilo desaparecer.
Nota: El selector :out-of-range no es compatible con Internet Explorer
Arriba ... ⇑

:read-only 17-07-2022

El selector :read-only selecciona los elementos que son "readonly".

Los elementos de formulario con un atributo "readonly" se definen como "readonly".

Nota: En la actualidad, en la mayoría de los navegadores, el selector :read-only sólo se aplica a los elementos de entrada y de texto, pero debe aplicarse a todos los elementos que son "readonly".

El selector :read-only es compatible con Chrome, Safari y Opera. Internet Explorer no admite el selector :read-only.

Firefox soporta una alternativa, el selector :-moz-read-only.

:read-only

<html>
<head>
<style>
    /* Para Firefox */
    input:-moz-read-only { background-color: yellow; }
    input:read-only { background-color: yellow; }
</style>
</head>
<body>
<h3>Una demostración del selector <em>:read-only</em>.</h3>
<p>Un &lt;input&gt; normal:<br>
<input value="Hola"></p>
<p>Un &lt;input&gt; de sólo lectura:<br>
<input readonly value="Hola"></p>
</body>
</html>

Una demostración del selector :read-only.

Un <input> normal:

Un <input> de sólo lectura:

El selector :read-only selecciona elementos de formulario con un atributo "readonly"..
Nota: El selector :read-only no es compatible con Internet Explorer.
Firefox soporta una alternativa, la propiedad :-moz-read-only.
Arriba ... ⇑

:read-write 17-07-2022

El selector :read-write selecciona elementos de formulario que son "legibles" y "escritura".

Los elementos de formulario sin atributo "readonly" y sin atributo "disabled" se definen como "legibles" y "escritura".

Nota: Actualmente, en la mayoría de los navegadores, el selector :read-write sólo se aplica a los elementos input y textarea, donde el atributo "readonly" no está presente, independientemente de si el elemento está desactivado o no.

El selector :read-write es compatible con Chrome, Safari y Opera. Internet Explorer no admite el selector :read-write.

Firefox soporta una alternativa, el selector :-moz-read-write.

:read-write

<html>
<head>
<style>
    /* Para Firefox */
    input:-moz-read-write { background-color: yellow; }
    input:read-write { background-color: yellow; }
</style>
</head>
<body>
<h3>Una demostración del selector <em>:read-write</em>.</h3>
<p>Un &lt;input&gt; normal:<br>
<input value="Hola"></p>
<p>Un &lt;input&gt; de sólo lectura:<br>
<input readonly value="Hola"></p>
</body>
</html>

Una demostración del selector :read-write.

Un <input> normal:

Un <input> de sólo lectura:

El selector :read-only selecciona elementos de formulario sin atributo "readonly".
Nota: El selector :read-write no es compatible con Internet Explorer.
Firefox soporta una alternativa, la propiedad :-moz-read-write.
Arriba ... ⇑

:required 17-07-2022

El selector :required selecciona los elementos del formulario que son necesarios.

Los elementos de formulario con un atributo required se consideran necesario.

El selector :required sólo se aplica a los elementos del formulario: input, select y textarea.

Sugerencia: Utilice el selector :optional para seleccionar elementos de formulario que son opcionales.

:required

<html>
<head>
<style>
    input:required { background-color: yellow; }
</style>
</head>
<body>
<h3>Una demostración del selector <em>:required</em>.</h3>
<p>Un &lt;input&gt; opcional:<br>
<input></p>
<p>Un &lt;input&gt; requerido:<br>
<input required></p>
</body>
</html>

Una demostración del selector :required.

Un <input> opcional:

Un <input> requerido:

El selector :required selecciona elementos de formulario con atributo "required".
El selector :required no es compatible con Internet Explorer 9 o versiones anteriores.
Arriba ... ⇑

:root 17-07-2022

El selector :root coincide con el elemento raíz del documento.

En HTML, el elemento raíz siempre es el elemento html.

:root

<html>
<head>
<style>
    :root { background-color: yellow; }
</style>
</head>
<body>
<h3>Este es un encabezado</h3>
</body>
</html>
Arriba ... ⇑

:target 17-07-2022

Las URL con un # seguido de un enlace de nombre de anclaje a cierto elemento dentro de un documento. El elemento al que se enlaza es el elemento objetivo.

El selector :target se puede utilizar para diseñar el elemento de destino activo actual.

:target

<html>
<head>
<style>
:target {
    border: 2px solid blue;
    background-color: yellow;
}
</style>
</head>
<body>
<h3>Este es un encabezado</h3>
<p><a href="#NuevoContenido1">Saltar a nuevo contenido 1</a></p>
<p><a href="#NuevoContenido2">Saltar a nuevo contenido 2</a></p>
<p>Haga clic en los enlaces de arriba y el selector <em>:target</em> resalta el anclaje HTML activo actual.</p>
<p id="NuevoContenido1"><b>Nuevo contenido 1 ...</b></p>
<p id="NuevoContenido2"><b>Nuevo contenido 2 ...</b></p>
</body>
</html>

Este es un encabezado

Saltar a nuevo contenido 1

Saltar a nuevo contenido 2

Haga clic en los enlaces de arriba y el selector :target resalta el anclaje HTML activo actual.

Nuevo contenido 1 ...

Nuevo contenido 2 ...

Nota: Internet Explorer 8 y versiones anteriores no admiten el selector de destino.

:target

<html>
<head>
<style>
    .oreja div { display: none; }
    .oreja div:target { display: block; }
</style>
</head>
<body>
<h3>Crear un menú con pestañas</h3>
<div class="oreja">
    <a href="#enlace1">Enlace 1</a>
    <a href="#enlace2">Enlace 2</a>
    <a href="#enlace3">Enlace 3</a>
    <div id="enlace1">
        <h3>Contenido Enlace 1</h3>
        <h4>Hola Mundo!</h4>
    </div>
    <div id="enlace2">
        <h3>Contenido Enlace 2</h3>
        <h4>¡Gran éxito!</h4>
    </div>
    <div id="enlace3">
        <h3>Contenido Enlace 3</h3>
        <h4>¡Sí!</h4>
    </div>
</div>
</body>
</html>

Crear un menú con pestañas

Enlace 1 Enlace 2 Enlace 3

Contenido Enlace 1

Hola Mundo!

Contenido Enlace 2

¡Gran éxito!

Contenido Enlace 3

¡Sí!

Arriba ... ⇑

:valid 17-07-2022

El selector :valid selecciona elementos de formulario con un valor que se valida de acuerdo con la configuración del elemento.

El selector :valid sólo funciona para elementos de formulario con limitaciones, como elementos de entrada con atributos min y max, campos de correo electrónico con correo electrónico legal o campos numéricos con un valor numérico, etc.

Consejo: utilice el selector :invalid para seleccionar elementos de formulario con un valor que no se valide de acuerdo con la configuración del elemento.

:valid

<html>
<head>
<style>
    input:valid { background-color: yellow; }
</style>
</head>
<body>
<h3>Una demostración del selector :valid.</h3>
<form>
    <input type="email" value="support@exampel.com">
</form>
</body>
</html>

Una demostración del selector :valid.

Intente escribir una dirección de correo electrónico no válida, para que el estilo desaparezca.
Arriba ... ⇑

:visited 17-07-2022

El selector :visited se utiliza para seleccionar los enlaces visitados.

Utilice el selector :link para vincular los estilos a páginas no visitadas, el selector :hover a los vínculos de estilo al pasar el mouse sobre ellos y el selector :active a los vínculos de estilo al hacer clic en ellos.

Los navegadores limitan los estilos que se pueden establecer para los enlaces visitados: debido a problemas de seguridad.

Los estilos permitidos son:

  • color
  • background-color
  • border-color
  • outline-color
  • column-rule-color
  • Las partes de color del relleno y del trazo

Todos los demás estilos se heredan de un enlace.

:visited

<html>
<head>
<style>
    a:visited { color: LimeGreen; }
    #divEnlace div{display:none}
    #divEnlace div:target{box-sizing:border-box;display:block;background:yellow;padding:10px;border-radius:20px;text-align:center;}
</style>
</head>
<body>
    <div id="divEnlace">
        <div id="divEnlace1">Has visitado el primer enlace</div>
        <div id="divEnlace2">Has visitado el segundo enlace</div>
        <div id="divEnlace3">Has visitado el tercer enlace</div>
    </div>
    <p><a href="#divEnlace1">Primer enlace.</a></p>
    <p><a href="#divEnlace2">Segundo enlace.</a></p>
    <p><a href="#divEnlace3">Tercer enlace.</a></p>
</body>
</html>
Has visitado el primer enlace
Has visitado el segundo enlace
Has visitado el tercer enlace

Primer enlace.

Segundo enlace.

Tercer enlace.

El estilo de selector :visited vincula a las páginas que ya visitó.
Arriba ... ⇑

::after (:after) 17-07-2022

El selector ::after inserta algo después del contenido de cada elemento seleccionado.

Utilice la propiedad content para especificar el contenido que se va a insertar.

Utilice el selector ::before para insertar algo antes del contenido.

Nota: IE8 y Opera 4-6 sólo admiten la antigua sintaxis CSS2 de un solo punto (:after). Las versiones más recientes soportan la sintaxis estándar de CSS3 de doble punto (::after).

::after

<html>
<head>
<style>
p::after {
    content: " - (Recuerda esto)";
    color: #D91D20;
}
</style>
</head>
<body>
<h2><em>::after</em> inserta contenido después del elemento</h2>
<p>La propiedad <em>content</em> especifica el contenido a insertar.</p>
<p><em>::before</em> inserta contenido antes del elemento.</p>
</body>
</html>

::after inserta contenido después del elemento

La propiedad content especifica el contenido a insertar.

::before inserta contenido antes del elemento.

::after (Tooltips)

<html>
<head>
<style>
span[data-descr] {
    position: relative;
    text-decoration: underline;
    color: #00F;
    cursor: help;
}
span[data-descr]:hover::after,
span[data-descr]:focus::after {
    content: attr(data-descr);
    position: absolute;
    left: 0;
    top: 24px;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 1;
}
</style>
</head>
<body>
<p>Aquí tenemos algunos
    <span tabindex="0" data-descr="colección de palabras y puntuación">texto</span> con unos pocos
    <span tabindex="0" data-descr="pequeñas ventanas emergentes que aparecen cuando flotan">tooltips</span>.
</p>
</body>
</html>
Aquí tenemos algunos texto con unos pocos tooltips.
Arriba ... ⇑

::before (:before) 17-07-2022

El selector ::before inserta algo antes del contenido de cada elemento seleccionado.

Utilice la propiedad content para especificar el contenido que se va a insertar.

Utilice el selector ::after para insertar algo después del contenido.

Nota: CSS3 introdujo la notación ::before (con doble dos puntos) para diferenciar pseudo-clases con pseudo-elementos. Los navegadores aceptan :before, añadido en CSS2.

::before

<html>
<head>
<style>
p::before {
    content: " (Recuerda esto) - ";
    color: #0A7B1A;
    font-weight: bold;
}
</style>
</head>
<body>
<h2><em>::before</em> inserta contenido antes del elemento</h2>
<p>La propiedad <em>content</em> especifica el contenido a insertar.</p>
<p><em>::after</em> inserta contenido después del elemento.</p>
</body>
</html>

::before inserta contenido antes del elemento

La propiedad content especifica el contenido a insertar.

::after inserta contenido después del elemento.

::before (Añadiendo comillas)

<html>
<head>
<style>
q::before {
    content: "«";
    color: blue;
}
q::after {
    content: "»";
    color: red;
}
</style>
</head>
<body>
<q> Algunas citas </q>, dijo, <q> son mejores que ninguna </q>.
</body>
</html>
Algunas citas , dijo, son mejores que ninguna .

Un ejemplo simple del uso del pseudo-elemento ::before es el proporcionar comillas. Aquí, usamos ::before y ::after para insertar caracteres de comillas.

::before (Ejemplo decorativo)

<html>
<head>
</head>
<style>
.ribbon { background-color: #5BC8F7; }
.ribbon::before {
    content: "Mira esta caja naranja.";
    background-color: #FFBA10;
    border-color: black;
    border-style: dotted;
}
</style>
<body>
<div>
    <span class="ribbon">Observe dónde está el cuadro naranja.</span>
</div>
</body>
</html>
Observe dónde está el cuadro naranja.

Podemos estilizar el texto o imágenes en la propiedad content de casi cualquier forma que queramos.

Arriba ... ⇑

::first-letter (:first-letter) 17-07-2022

El selector ::first-letter se utiliza para agregar un estilo a la primera letra del selector especificado.

Una combinación del pseudo-elemento ::before y la propiedad content puede inyectar algo de texto al comienzo del elemento. En ese caso, ::first-letter coincidirá con la primera letra de este contenido generado.

CSS3 introdujo ::first-letter la notación (con dos dos puntos) para distinguir pseudo-clases de pseudo-elementos . Los navegadores también aceptan :first-letter, introducido en CSS2.

Las siguientes propiedades se pueden utilizar con ::first-letter:

  • Todas las propiedades de la fuente: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-heightyfont-family
  • Todas las propiedades de fondo: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, ybackground-blend-mode
  • Todas las propiedades de los márgenes: margin, margin-top, margin-right, margin-bottom,margin-left
  • Todas las propiedades de relleno: padding, padding-top, padding-right, padding-bottom,padding-left
  • Todas las propiedades de borde: border, border-style, border-color, border-width, border-radius, border-image
  • La propiedad color
  • Los text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (cuando sea apropiado), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (sólo si float es none) propiedades CSS

Nota: El selector ::first-letter sólo se puede utilizar con elementos de nivel de bloque.

Nota: IE 5.5-8 y Opera 4-6 sólo admiten la antigua sintaxis de CSS2 de un solo punto (: first-letter). Las versiones más recientes soportan la sintaxis estándar de CSS3 de doble-punto (::first-letter).

::first-letter

<html>
<head>
<style>
li::first-letter,
p::first-letter {
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(252, 32, 4);
}
</style>
</head>
<body>
<ul>
    <li>Fresa</li>
</ul>
<ol>
    <li>Caballo</li>
</ol>
<div>
    <p>Mi primer parrafo</p>
    <p>Segundo parrafo</p>
</div>
<p>*Con signo de puntuación especial.</p>
<p>#Con signo de puntuación especial.</p>
<p>"Con signo de puntuación especial.</p>
<p>'Con signo de puntuación especial.</p>
<p>-Con signo de puntuación especial.</p>
<p>_Con signo de puntuación especial.</p>
</body>
</html>
  • Fresa
  1. Caballo

Mi primer parrafo

Segundo parrafo

*Con signo de puntuación especial.

#Con signo de puntuación especial.

"Con signo de puntuación especial.

'Con signo de puntuación especial.

-Con signo de puntuación especial.

_Con signo de puntuación especial.

Arriba ... ⇑

::first-line (:first-line) 17-07-2022

El selector ::first-line se utiliza para agregar un estilo a la primera línea del selector especificado.

Nota: El selector ::first-line sólo se puede utilizar con elementos de nivel de bloque.

CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

  • Todas las propiedades de fuente: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, font-family
  • Todas las propiedades de fondo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode
  • La propiedad color
  • word-spacing, letter-spacing, text-decoration, text-transform, line-height
  • text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, vertical-align.

::first-line

<html>
<head>
<style>
p { text-indent: 1em; }
p::first-line {
    background-color: yellow;
    text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Medio ambiente</h2>
<p>TEXTO de varias líneas</p>
<p>TEXTO de varias líneas</p>
</body>
</html>

Medio ambiente

El medio ambiente es un sistema formado por elementos naturales y artificiales que están interrelacionados y que son modificados por la acción humana. Se trata del entorno que condiciona la forma de vida de la sociedad.

Nota: Para que este selector funcione en IE 5.5-8, debe especificar la antigua sintaxis CSS2 de un solo signo (: first-line en vez de :: first-line).

Arriba ... ⇑

::placeholder 17-07-2022

El pseudo-elemento CSS ::placeholder representa el texto provisional en un elemento <input> o un elemento <textarea>.

Nota: En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.

::placeholder

<html>
<head>
</head>
<style>
input::placeholder {
    color: red;
    font-size: 1.2em;
    font-style: italic;
}
</style>
<body>
    <input placeholder="Escriba algo aquí!">
</body>
</html>
Arriba ... ⇑

::selection 17-07-2022

El selector ::selection la parte de un elemento seleccionado por un usuario.

Sólo se pueden aplicar algunas propiedades CSS al selector ::selection color, fondo, cursor y contorno.

Nota: El pseudo-elemento ::selection fue redactado para CSS Selectors Level 3, pero eliminado antes del estado de Recomendación. Por lo tanto, en este momento, el pseudo-elemento ::selection no está en ninguna especificación. (Sin embargo, se puede volver a agregar a futuras especificaciones de CSS.)

Arriba ... ⇑

::-webkit-progress-bar 18-07-2022

Esta característica no es estándar y no está en una pista estándar. No lo use en sitios de producción orientados a la Web: no funcionará para todos los usuarios.

El pseudo-elemento CSS representa la barra completa de un elemento. Normalmente solo es visible como la parte sin rellenar de la barra, ya que por defecto se muestra debajo del pseudo-elemento. Es un hijo del pseudo-elemento y el padre del pseudo-elemento. ::-webkit-progress-bar <progress> ::-webkit-progress-value ::-webkit-progress-inner-element ::-webkit-progress-value

Nota: Para que ::-webkit-progress-value surta efecto, -webkit-appearance debe establecerse none en el elemento <progress>.

::-webkit-progress-bar

<html>
<head>
<style>
    progress { -webkit-appearance: none; }
    ::-webkit-progress-bar { background-color: orange; }
</style>
</head>
<body>
    <progress value="10" max="50"></progress>
</body>
</html>
Arriba ... ⇑

::-webkit-progress-value 18-07-2022

Esta característica no es estándar y no está en una pista estándar. No lo use en sitios de producción orientados a la Web: no funcionará para todos los usuarios.

El pseudo-elemento CSS representa la porción rellenada de la barra de un elemento. Es un hijo del pseudo-elemento. ::-webkit-progress-value <progress> ::-webkit-progress-bar

Nota: para que ::-webkit-progress-value surta efecto, -webkit-appearance debe establecerse none en el elemento <progress>.

::-webkit-progress-value

<html>
<head>
<style>
    progress { -webkit-appearance: none; }
    ::-webkit-progress-value { background-color: orange; }
</style>
</head>
<body>
    <progress value="10" max="50"></progress>
</body>
</html>
Arriba ... ⇑