7.2. Sintaxis

El propósito de este apartado es describir cuál es la sintaxis general de CSS sin entrar a enumerar en concreto cuáles son todas las propiedades individuales posibles.

7.2.1. Sentencias

CSS se compone de tres tipos de sentencias:

• Los comentarios, que se notan como en el lenguaje C:

  /* Esto es un comentario en CSS */
  

• Las instrucciones at-rule de las que hay varias y tienen distinta finalidad. Las más habituales son:

  @import

  que permite cargar en la hoja de estilos el contenido de otra hoja de estilos:

  @import url("segundahoja.css");
  

  El argumento es una URL absoluta o relativa (como es el caso) a la ubicación de la hoja desde la que se invoca.

  Nota

  Nótese el punto y coma («;») con el que se remata la sentencia. Mientras no se incluya se considerará que la sentencia no se ha acabado, aunque se cambie de línea. Es otro comportamiento heredado de C.

  Advertencia

  La sentencia debe colocarse al principio del archivo. De lo contrario, el navegador evitará su ejecución.

  @page

  Sirve para definir propiedades de las páginas en la impresión como los márgenes o las líneas huérfanas. Se puede acompañar de las pseudoclases como :first, :left, :right, :blank para afectar sólo a ciertas páginas (la primera, las que quedan a la izquierda, etc.):

  /* El margen izquierdo de todas las páginas es 3 cm */
  @page {
     margin-left: 3cm;
  }
  
  /* El margen superior de la primera página es 9 cm */
  @page :first {
     margin-top: 9cm;
  }
  

  @font-face

  Permite definir el origen del que obtener una tipografía por si estimamos que el usuario puede no tenerla instalada en su sistema. Por ejemplo:

  @font-face {
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 400;
     src:
        local("Open Sans"); /* Si está instalada en el sistema, no se descarga */
        url("fonts/opensans.woff2") format("woff2");   /* Web Open Font Format v2 */
        url("fonts/opensans.woff") format("woff");     /* Web Open Font Format */
        url("fonts/opensans.ttf") format("truetype");  /* TTF para navegadores viejos */
  }
  
  /* ... */
  
  body {
     font-family: "Open Sans", sans-serif; /* En principio, la alternativa sobra */
  }
  

  @media

  Define bajo qué condiciones o medios se aplican las reglas que se incluyen dentro del bloque. Los medios pueden ser all, screen, print o speech (lectores de texto para invidentes) y las condiciones se relacionan fundamentalmente con las dimensiones del dispositivo (véase Condiciones de Media Queries). Por ejemplo:

  @media screen and (width <= 400px) { /* También: (max-width: 400px) */
     body {
        width: 100%;
     }
  }
  
  @media screen and (400px < width <= 800px)  { /* También (min-width: 400px) and (max-width: 800px) */
     body {
        width: 90%;
     }
  }
  
  @media screen and (width > 800)  { /* También: (min-width: 800px) */
     body {
        width: 800px;
     }
  }
  

• Las reglas o normas de estilo son propiamente las que definen el aspecto de los elementos HTML. Tienen la siguiente sintaxis:

  Norma de estilo

  p	{	color	:	#EEE	;	font-style	:	italic	}
  selector		propiedad		valor		propiedad		valor
  		declaración				declaración
  	bloque de la declaración

  Constan de un selector, que sirve para indicar los elementos HTML afectados por la regla y un bloque contenedor limitado por paréntesis («{}») con las propiedades. Dentro del bloque de contenidos se van declarando las propiedades, de modo que cada una de ellas se compone del nombre de la propiedad, dos puntos como separador, y el valor que se asignará a tal propiedad. Para separar una declaración de otra se usa el punto y coma («;»). Por ejemplo:

  /* Esta regla afecta a todos los párrafos */
  p {
    color: #EEE;
    font-style: italic;
  }
  

  Prudencia

  Tenga presente que las propiedades se aplican sobre el elemento o los elementos que determine el selector, pero muchas de las propiedades CSS son heredables, lo que quiere decir que si se define el valor de la propiedad para un elemento contenedor, la propiedad del elemento contenido también tendrá ese valor. Por ejemplo:

  article {
      border: solid black 1px;
      color: blue;
  }
  

  border no es un propiedad heredada, mientras que color sí lo es. Esto supone que un párrafo incluido dentro de este elemento article tenga sus letras de color azul, pero, sin embargo, no tenga elementos de borde (a menos que explícitamente se definan para él).

7.2.2. Selectores

El selector es la parte de la regla que identifica el elemento o los elementos HTML sobre los que se aplica. Cumple, por tanto, la misma función que una expresión XPath y, de hecho, pueden usarlos otras tecnologías como mecanismo para seleccionar elementos de documentos XML o HTML, como es el caso de Javascript con sus métodos document.querySelector o document.querySelectorAll, lo cual convierte el conocimiento de cómo se construyen en algo útil no solamente para escribir reglas CSS, sino para la programación web en general.

Nota

Hay ya en borrador una especificación de nivel 4 para selectores con muchísima expresividad. Nosotros trataremos lo fundamental de ellos.

7.2.2.1. Simple

Dentro de un selector simple pueden aparecer yuxtapuestos hasta seis tipos de componentes:

Elemento

que, como su nombre indica, especifica qué elemento referimos:

/* La regla se aplica a párrafos */
p {
  color: #EEE;
  font-style: italic;
}

/* Comodín para indicar cualquier elemento */
* {
  text-align: center;
}

Es el único componente que no podemos usar repetidamente en un selector simple.

Clase

que provoca que se seleccione aquel elemento que pertenece a la clase indicada. Se nota anteponiendo un punto («.») al nombre de la clase:

/* Cualquier elemento de la clase "foo" (no expresamos elemento) */
.foo {
   font-style: italic;
}

/* Cualquier párrafo de la clase "foo" */
p.foo {
   color: gray;
}

/* Repetimos este componente: cualquier elemento que pertenezca a las clases "foo" y "bar" */
.foo.bar {
   background-color: yellow;
}

Identificador

que selecciona el elemento con el identificador indicado. Para ello se antepone una almohadilla («#») al nombre del identificador:

#punto1 {
   font-weight: bold;
}

Como el identificador, por definición, es único no tiene, en principio, sentido usar junto a él otros en componentes, aunque podría llegar a ser útil para aumentar la especificidad de la regla.

Atributo

que permite seleccionar el elemento que disponga de un determinado atributo. Para distinguirlo del resto, este componente se escribe entre corchetes:

/* Cualquier elemento con un atributo title, sea cual sea su valor */
[title] {
   color: blue;
}

/* Cualquier elemento con atributos title y href */
[href][title] {
   cursor: crosshair;
}

/* Cualquier enlace con atributo title */
a[title] {
   cursor: crosshair;
}

/* Cualquier elemento cuyo atributo "lang" valga "es" */
[lang=es] {
   font-weight: bold;
}

/* Cualquier elemento cuyo atributo "class" contenga la palabra "foo" */
[class~=foo] {  /* Habríamos acabado antes con .foo */
   font-style: italic;
}

/* Cualquier elemento cuyo atributo href empiece por http: */
[href^=http:] {  /* La comunicación con este enlace no es segura */
   color: red;
}

/* Cualquier enlace cuyo atributo href acabe con .pdf */
a[href$=.pdf] {
   text-decoration: underline;
}

/* Cualquier enlace cuyo atributo href contiene la cadena "google" */
[href*=google] {
   color: #00F;
}

/* Cualquier elemento cuyo atributo class vale "foo" o "foo-LOQUESEA" */
[class|=foo] {
   blackground: gray;
}

Prudencia

Los valores no se han encerrado entre comillas, porque no hay caracteres raros que puedan confundir al procesador. Cuando los hay, en cambio, son necesarios. Véase el próximo ejemplo:

Pseudoelementos

Los pseudoelementos son entidades del documento HTML que no se representan con nodos elemento. Desde el nivel 3[1], se notan anteponiendo dos veces dos puntos («::») al nombre del pseudoelemento. Algunos de los definidos son:

• ::before, que se aplica en un elemento a un imaginario primer hijo anterior al primer hijo que realmente aparece en el documento. Por ejemplo:

  /* Añade un calderón antes de todos los elementos con identificador */
  [id]::before {
     content: "\00B6";
  }
  

• ::after, que se aplica en un elemento a un imaginario último hijo posterior al último hijo que realmente aparece en el documento:

  [id]::after {
     content: "\00B6";
  }
  

• ::first-letter, que se aplica a la primera letra de la primera línea de un elemento de bloque:

  p::first-letter {
     font-size: xxx-large;
  }
  

• ::first-line, que se aplica a la totalidad de la primera línea de un elemento de bloque:

  ::first-line {
     font-size: x-large;
  }
  

• ::marker, que selecciona la caja de marcadores de cualquier elemento que se haya configurado como display: list-item. Por ejemplo, permitiría seleccionar la viñeta del ítem de una lista o de un elemento details:

  /* Las viñetas (y las numeraciones) de las listas, en rojo */
  li::marker {
      color: red;
  }
  

Pseudoclases

Las pseudoclases seleccionan elementos según alguna característica o estado que tengan (vacío, con el cursor encima de él, último hijo de su padre, etc.). Hay muchas pseudo-classes disponibles, de modo que sólo citaremos algunas muy socorridas:

• Relativas al estado de los campos de los formularios (:checked, :enabled, :disabled, :blank, etc.):

  /* Los campos con valores inválidos tendrán un fondo colorado */
  input:invalid {
      background-color: #FAA;
  }
  

• Relativas a enlaces (:any-link, :link, :visited, :target, etc):

  /* Los enlaces ya visitados se mostrarán en gris */
  a:visited {
      color: gray;
  }
  

• Relativas al estado de reproducción del medio audiovisual (:playing, :paused).

• Relativas a acciones del usuario (hover, active, focus, etc.):

  /* La fila de la tabla se mostrará con fondo amarillo, si el ratón pasa por encima */
  tr:hover {
      background-color: yellow;
  }
  
  /* El campo que esté rellenando tendrá un color de fondo distinto */
  input:focus {
      background-color: lightblue;
  }
  

• Relativas a la ubicación del elemento respecto a su padre y sus hermanos:

  :empty

  concuerda con elementos vacíos sin hijos.

  :only-child

  concuerda con el elemento que es el único hijo de su padre, esto es, no tiene hermanos.

  :only-of-type

  concuerda con el elemento que es el único hijo de su tipo para su padre, esto es, no tiene hermanos de su mismo tipo:

  /* Creará un borde para los párrafos que se encuentren dentro de un
     elemento que no tenga más párrafos como hijo */
  p:only-of-type {
    border: solid black 1px;
  }
  

  :first-child, :last-child

  concuerda si el elemento es el primer hijo (o el último) de su padre.

  :first-of-type, :last-of-type

  concuerda si el elemento es el primer hijo de su tipo (o el último) para su padre. Por ejemplo:

  dd:first-of-type {
    font-weight: bold;
  }
  

  provocará que se escriba en negrita el primer elemento dd de este código:

  <dl>
    <dt>Europa:</dt>
    <dd>España</dd> <!-- Se verá en negrita -->
    <dd>Francia</dd>
    <dt>Asia</dt>
    <dd>China</dd>
    <dd>Japón</dd>
  </dl>
  

  porque aunque no es el primer hijo (lo es el elemento dt que tiene justamente encima), sí es el primer hijo de su tipo (dd).

  :nth-child(An + B), :nth-last-child(An + B)

  concuerda con los elementos que son hijos y cumplen la ecuación \(An + B\), donde \(n\) es cualquier número natural o el 0. La diferencia entre uno y otro es que el primero empieza a contar por el principio y el segundo por el final:

  /* Concuerda con el tercer ítem de la lista */
  li:nth-child(3) {
    font-weight: bold;
  }
  
  /* Concuerda con el penúltimo ítem de la lista */
  li:nth-last-child(2) {
    font-weight: bold;
  }
  
  /* Concuerda con todos los ítems excepto el primero */
  li:nth-child(n + 2) { /* 0+2=2, 1+2=3, etc. */
    font-weight: bold;
  }
  
  /* Concuerda con los dos primeros ítems */
  li:nth-child(-n + 2) {
    font-weight: bold;
  }
  
  /* Concuerda con los dos últimos ítems */
  li:nth-last-child(-n + 2) {
    font-weight: bold;
  }
  
  /* Concuerda con los ítems pares */
  li:nth-child(2n) {
    font-weight: bold;
  }
  
  /* Concuerda con los ítems impares */
  li:nth-child(2n+1) {
    font-weight: bold;
  }
  

  Nota

  Como alternativa a estos dos últimos se pueden usar las palabras even y odd.

  :nth-of-type(An + B), :nth-last-of-type(An + B)

  como los anteriores pero sólo atiende a los elementos del tipo en cuestión. Por ejemplo:

  dd:nth-of-type(2n) {
    font-weight: bold;
  }
  

  provoca lo siguiente en este código:

  <dl>
    <dt>Europa:</dt>
    <dd>España</dd>
    <dd>Francia</dd> <!-- Negrita -->
    <dt>Asia</dt>
    <dd>China</dd>
    <dd>Japón</dd>   <!-- Negrita -->
  </dl>
  

• Relativas a listas de selectores:

  :is(...)

  concuerda con cualquiera de los selectores incluidos en la lista:

  /* La lista tendrá un recuadro sea de viñetas (ul) o numerada (ol) */
  :is(ol, ul) {
     border: solid black 1px;
  }
  
  /* Cualquier párrafo con atributos "id" o "class" se escribirá en negrita */
  p:is([id], [class]) {
     font-weight: bold;
  }
  

  La especificidad de esta pseudoclase es la especificidad del selector de la lista con más especificidad.

  Prudencia

  La lista, como en el resto de pseudoclases de esta subsección, no puede incluir pseudoelementos.

  :where(...)

  tiene exactamente el mismo significado que :is con una única diferencia: su especificidad siempre es 0.

  :not(...)

  es la negación de :is, por lo que concuerda siempre que el elemento no concuerde con ninguno de los selectores de la lista:

  /* Todos los ítems de lista se ven en negrita, excepto el primero */
  li:not(:first-child) {
     font-weight: bold;
  }
  
  /* Ídem, excepto el primero y el último */
  li:not(:first-child, :last-child) {
     font-weight: bold;
  }
  

  :has(...)

  provoca que el selector concuerde cuando la combinación de dicho selector con cualquiera de los selectores relativos de la lista concuerda. La única forma de entender esta pseudoclase es haber estudiado antes la combinación de selectores. Dejaremos aquí algunos ejemplos para que se repasen después de haber entendido cómo se combinan los selectores:

  /* La lista  "ol" concuerda si tiene anidada otra lista "ul"
     ("ul" es descendiente de "ol") */
  ol:has(ul) {
     color: green;
  }
  
  /* Generalización del caso anterior */
  :is(ol, ul):has(ol, ul) {
     color: green;
  }
  
  /* Celdas cuyo contenido es estrictamente un único párrafo */
  td:has(>p:only-child) {
     color: lightblue;
  }
  
  /* H1 al que sigue inmediatamente después un H2 */
  h1:has(+ h2) {
     margin: 0  0 .25em 0;
  }
  

7.2.2.2. Combinado

Los selectores simples pueden combinarse mediante operadores para aumentar la especificidad del último selector. Los operadores son:

Espacio

Fuerza a que el nodo seleccionado por el segundo selector sea descendiente del seleccionado por el primero:

/* Solo concuerdan los párrafos que desciendan de un elemento "div" */
div p {
   border: solid black 1px;
}

/* Los selectores simples combinados pueden ser todo lo complejo que queramos */
div p.importante {
   font-weight: bold;
}

Nota

Obsérvese que se seleccionan párrafos, no elementos div. En una combinación siempre se seleccionan los nodos definidos por el último selector. Para haber seleccionado elementos div que tuvieran descendientes p, tendríamos que haber usado la pseudoclase :has():

div:has(p) {
   border: solid black 1px;
}

Por supuesto pueden combinarse más de dos selectores en una misma regla:

/* Selecciona los párrafos que siguen inmediatamente a un título h1
   que deben ser descendientes de un div */
div h1 + p {
   font-weight: bold;
}

>

Fuerza a que el nodo seleccionado por el segundo selector sea hijo del seleccionado por el primero. Es, por tanto, un operador más restrictivo que el anterior:

/* El párrafo debe ser un hijo directo de div */
div>p {
   border: solid black 1px;
}

~

Fuerza a que el nodo seleccionado por el segundo selector sea un hermano posterior al seleccionado por el primero:

/* p es un hermano posterior a h1 */
h1 ~ p {
   font-style: italic;
}

+

Como el anterior pero el nodo del segundo selector debe ser el hermano inmediatamente posterior, no cualquiera posterior:

/* h2 es hermano inmediatamente posterior a h1 */
h1 + h2 {
   font-style: italic;
}

&

Permite anidar reglas para ahorrar escritura. Esto:

div {
   font-family: sans-serif;

   & > h1 {
      color: blue;
   }

   & p {
      font-style: italic;
   }
}

equivale a:

div {
   font-family: sans-serif;
}

div>h1 {
   color: blue;
}

div p {
   font-style: italic;
}

7.2.2.3. Lista

La lista de selectores es, simplemente, una enumeración de selectores simples o combinados que comparten las mismas propiedades CSS. Se nota separando los selectores por comas. Esto:

p {
   color: blue;
}

pre {
   color: blue;
}

equivale a esta lista:

p, pre {
   color: blue;
}

Nota

Obsérvese que cuando los selectores son combinados y comparten gran parte de la combinación:

table.estadistica thead th p,
table.estadistica thead td p {
   background-color: gray
}

es muy útil la pseudoclase :is():

table.estadistica thead :is(th, td) p {
   background-color: gray
}

Otro ejemplo que combina lista de selectores y selectores anidados es:

h1, h2, h3, h4, h5, h6 {
   &[id]::before {
      content: "\00B6";
   }
}

el cual sólo pone el calderón a cualquier encabezado con identificador, pero no al resto de elementos.

7.2.3. Cascada

Llegado a este punto toca, finalmente, explicar porqué los estilos son en cascada. El problema de definir las reglas del modo en que se definen es que puede muy comúnmente haber dos o más declaraciones sobre una determinada propiedad que sean aplicables a un mismo elemento y, en ese caso, ¿cuál de ellas se aplica? La cascada es el algoritmo que permite escoger cuál se aplica y está influída por seis factores:

Importancia

Aunque no sea una práctica muy recomendable, al definirse una propiedad puede marcarse como que es importante añadiendo la palabra important tras su valor:

p {
   color: blue !important;
}

1. Una declaración importante siempre tiene precedencia sobre una declaración normal.

Origen

Según su origen,

2. Ante dos reglas normales, tiene precedencia el estilo del autor sobre el del usuario y el del usuario sobre el del navegador. Ante reglas importantes, la precedencia es la inversa.

Pero, ¿qué son estos tres estilos de autor, usuario y navegador?

Hoja de estilos predeterminado o del navegador o del agente de usuario

que es la página de estilos que el navegador aplica a todas las páginas que renderiza. En ausencia de cualquier indicación de estilo adicional, una página siempre se verá con el estilo que le aplica por defecto el navegador. Por este motivo, un documento HTML que escribamos sin haberle definido ningún aspecto, tiene una representación gráfica.

Hoja de estilos del usuario

es una hoja de estilos que el navegador permite definir al usuario que lo utiliza. Por lo general, está vacía y sólo un usuario avanzado se atreverá a incluir reglas en ella.

Hoja de estilos del autor (que, por otro lado, pueden ser varias)

es la hoja con que el autor de una página define su aspecto.

Asociación

Ya se trató la forma en que un autor puede asociar las reglas CSS a los elementos de un documento HTML. Esa asociación puede ser en línea o no serlo (ser interna o externa). Pues bien:

3. A igualdad de importancia, las declaraciones hechas en línea tienen precedencia sobre las declaraciones internas o externas.

Por hacer

Probar si hay alguna diferencia en la preferencia entre internas y externas.

Especificidad

La especificidad es la medida de la precisión con la que el selector indica cuál es el elemento HTML sobre el que se aplica la regla. Obviamente:

4. Cuanto más específica sea una regla, mayor precedencia tiene.

Ahora bien, ¿cómo se hace esa medida? La especificidad se obtiene como una terna de números a partir de los componentes de los que se constituye el selector:

1. El primer número es la cantidad de identificadores (#nombre).

2. El segundo número es la cantidad de selectores de clase (.clase), selectores de atributo ([...]) y pseudoclases (:hover, :empty, etc.). De este cómputo se exceptúan las pseudoclases relativas a listas de selectores, que afectan de distinto modo a la especificidad:

   • :where() no suma nada en absoluto.

   • Las restantes (:is(), :not() y :has(...)) aportan la misma especificidad que la especificidad que aporte su argumento con más especificidad.

3. El tercer número es la cantidad de selectores de elemento y pseudoelemento, con la excepción del selector universal * cuya especificidad es 0.

En caso de selectores anidados (&), la especificidad de las declaraciones de un nivel de anidamiento es la suma de la especificidad de ese nivel y la de todos los niveles anteriores.

El selector más específico es el que tiene mayor el primer número de la terna, a igual de éste, mayor el segundo, y a igual de éste, mayor el tercero.

Ver también

Pruebe a calcular la especificidad de cualquier selector que se le ocurra en polypane.app.

Ejemplos

Selector	Especificidad
*	(0,0,0)
p	(0,0,1)
#sec1	(1,0,0)
p.warning	(0,1,1)
li::marker	(0,0,2)
.listado li::marker	(0,1,2)
h1 + h2	(0,0,2)
div p[lang]	(0,1,2)
:is(ol, ul) :is(ol, lu)	(0,0,2)
:is(ol, ul) :where(ol, lu)	(0,0,1)
li:not(:first-child)	(0,1,1)

Orden de aparición

Como es esperable:

5. A igual de todos los factores anteriores, se aplica la regla definida en último lugar.

Herencia

La herencia posibilita que, cuando una propiedad es heredable (p.e. el color) y el elemento no tiene ninguna declaración propia para esa propiedad, herede el valor que tenga en el ascendiente más inmediato para el que se hiciera una declaración:

6. Los elementos sin declaración propia para el valor de una propiedad, heredan el valor que tenga la propiedad para su padre, si dicha propiedad es heredable.

Esta última regla (el mecanismo de la herencia) puede manipularse asignando en una declaración propia del elemento unos valores determinados a la propiedad:

initial

Devuelve siempre la propiedad a su valor inicial.

inherit

Aplica siempre el valor que tenga la propiedad para su padre.

unset

Si la propiedad es heredable, actúa como inherit y, si no lo es, como initial.

revert

Devuelve siempre la propiedad al valor que tendría si no se hubiera aplicado ningún estilo, excepto el que pudiera haber definido la hoja de estilos del navegador. initial, en cambio, tampoco habría aplicado el estilo de esta última hoja.

Nota

Existe, además, la propiedad all, que puede tomar uno de los valores anteriores y que lo aplica a todas las propiedades a la vez.

7.2.4. Unidades

Muchas propiedades CSS (anchos, altos, márgenes, etc) requieren la expresión de una longitud en una unidad de medida, por lo que es muy recomendable saber qué unidades nos permite usar CSS. Podemos distinguir:

• Longitudes absolutas.

• Longitudes relativas.

• Porcentajes.

7.2.4.1. Longitudes absolutas

Son aquellas que utilizan ninguna referencia y, por tanto, siempre representan la misma longitud.

Unidades absolutas

Unidad	Nombre	Descripción
px	píxel	Es la unidad mínima en que se descompone una imagen.
pt	punto	Equivale a \(96/72\) píxeles[2].
pc	pica	Equivale a 16 píxeles.
Q	cuarto de mm	Es la cuarta parte de un mm.
mm	milímetro	Es la décima parte de un cm.
cm	centímetro	Es la centésima parte del metro.
in	pulgada	Equivale a 96px o 2,54 cm.

Por lo general, de estas medidas absolutas se usa px cuando definimos unidades para la pantalla, y in, cm o mm cuando definidos unidades para la versión impresa (p.e. unos márgenes de impresión).

7.2.4.2. Longitudes relativas

Son aquellas relativas a una referencia como el tamaño del dispositivo o el tamaño de la fuente. Por tanto, si modificamos el tamaño de la referencia, escalarán proporcionalmente.

Unidades relativas

Unidad	Descripción
em	Equivale al ancho ocupado por la letra M mayúscula (la más ancha y de ahí su nombre) definida para el elemento. Por tanto, depende del valor de la propiedad font-size.
rem	Como la anterior, pero el valor de font-size que se usa es el del elemento raíz (o sea, html), cuyo valor predeterminado es 16px.
ex	Es la altura ocupada por la letra x minúscula definida para el elemento. En este caso, su valor depende tanto de font-size como de font-family. Su valor aproximado, aunque variable, es 0.5em.
rex	Como el anterior, pero los valores que se toman como referencia son los del elemento html.
ch	Es el ancho del carácter 0 definido para el elemento.
rch	Como el anterior, pero se toma como referencia el elemento html.
lh	Equivale al valor de la propiedad line-height del elemento.
rlh	Como el anterior, pero se toma como referencia el elemento html.

7.2.4.3. Porcentajes

Expresan un porcentaje sobre una determinada longitud.

Porcentajes

Unidad	Descripción
%	Por lo general, expresa un porcentaje sobre una propiedad del elemento padre o del propio elemento.
vw	Expresa un porcentaje sobre el ancho del área de visualización que proporciona el navegador.
vh	Expresa un porcentaje sobre la altura del área de visualización que proporciona el navegador.
vmin	Expresa un porcentaje sobre el mínimo entre la anchura y la altura del área de visualización que proporciona el navegador.
vmax	Expresa un porcentaje sobre el máximo entre la anchura y la altura del área de visualización que proporciona el navegador.

De todas estas unidades, la más anárquica es la de porcentaje, puesto que no está definido de forma general sobre qué longitud se calcula el porcentaje, sino que dependiendo de la propiedad CSS la longitud de referencia será una u otra. Por ejemplo, para width o margin se toma como referencia la anchura del elemento contenedor (padre). En cambio, para line-height se usa el tamaño de letra (font-size) del elemento mismo.

Ver también

Jim Fisher facilita una tabla de propiedades CSS y referentes cuando se usan porcentajes como valor

7.2.5. Ejercicios propuestos

1. Escriba el selector apropiado para las descripciones que se hacen a continuación:

   1. Los párrafos de la clase alerta.

   2. Cualquier elemento de la clase alerta e importante

   3. Las celdas normales y de cabecera de la tabla de clase elementos.

   4. Las celdas normales y de cabecera de la tabla con identificador principal.

   5. Los enlaces a recursos accesibles mediante el protocolo ed2k.

   6. El seudoelemento que antecede a los enlaces referidos en el punto anterior.

   7. Los elementos input de sólo lectura.

   8. Elementos article que contienen encabezados de nivel 2.

   9. Los enlaces sobre los que se pasa el ratón.

   10. El seudoelemento que sucede a los enlaces referidos en el punto anterior.

   11. El primer hijo de un elemento section.

   12. Las celdas de las filas impares de la tabla de la clase elementos.

   13. La primera, cuarta, séptima, etc. celdas de la tabla de la clase elementos.

   14. Empezando por atrás, lo mismo del apartado anterior.

   15. El párrafo que sigue inmediatamente a un encabezado de nivel 3.

   16. El pseudoelemento marker de ítems de listas numeradas o no numeradas, las cuales son hijas de un elemento article.

   17. Abreviaturas sin atributo title.

   18. Todas las celdas de filas pares excepto la última (celda, no fila).

   19. El primer carácter del término de una lista de definiciones.

   20. Las celdas no vacías de la tabla con identificador principal.

2. Calcule justificadamente cuál de los selectores tiene más especifidad:

   1. Regla CSS que se aplica con:

      [id] a.externo { /* ... */ }
      a[href] { /* ... */ }
      p a { /* ... */ }
      

   2. Regla CSS que se aplica con:

      .tabla :is(td, th) { /* ... */ }
      table :where(td, th):hover { /* ... */ }
      .tabla :where(td, th):hover { /* ... */ }
      

   3. Regla CSS que se aplica con:

      h1 + p>ol[class] { /* ... */ }
      [id] ol.listita li { /* ... */ }
      .seccion ol li { /* ... */ }
      

   4. Regla CSS que se aplica con:

      #a1 :is(ol, ul) :where(ol, ul).interna li { /* ... */ }
      #a1 :is(ol, ul) :is(ol, ul) li { /* ... */ }
      section :is(ol, ul).externa :is(ol, ul).interna li { /* ... */ }
      

   5. Regla CSS que se aplica con:

      form fieldset :invalid { /* ... */ }
      .formulario :where(fieldset, div) input:invalid { /* ... */ }
      .formulario input:invalid { /* ... */ }
      

Notas al pie

[1]

En el nivel 2 se les anteponía uno solo como a las pseudoclases. Los navegadores modernos aún soportan esta sintaxis antigua.

[2]

La medida no es caprichosa. Actualmente los monitores tienen 96 ppi (píxeles por pulgada). Sin embargo, los monitores antiguos tenían una resolución de 72 ppi, de ahí la relación de \(96/72\).