25 - El selector universal *


Si queremos inicializar las propiedades de todas los elementos HTML podemos utilizar el selector universal. Utilizamos el carácter asterisco para hacer referencia a este selector.

Ejemplo:

* {
  margin:0;
  padding:0;
  color:#ff0000;
}

Con dicho selector estamos especificando que todos los elementos HTML tendrán un margin y padding de cero y los texto serán de color rojo.

Veamos un ejemplo dentro de una página:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<p>Esto esta dentro de un párrafo</p>
</body>
</html>

Luego en la hoja de estilo definimos:

* {
    color:#0000aa;
    margin:0;
    padding:0;
}

Esto significa que todas los elementos se imprimen de color azul con cero píxel de margin y padding, salvo que otra regla lo cambie, Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla.

En realidad, en forma tácita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de elemento HTML donde actuará:

.pregunta {
  background-color:#ffff00;
  border-width:1px;
  border-style:solid;
  border-color:#000000;
}

Podemos expresar la regla anterior perfectamente como:

*.pregunta {
  background-color:#ffff00;
  border-width:1px;
  border-style:solid;
  border-color:#000000;
}

Es decir que podemos asignar esta regla a cualquier elemento HTML.

Esto nos permite comprender, cuando definimos una regla que sólo se puede utilizar en un sólo tipo de elemento HTML:

p.pregunta {
  background-color:#ffff00;
  border-width:1px;
  border-style:solid;
  border-color:#000000;
}

Esta regla sólo se puede utilizar dentro de elementos de tipo párrafo.


Retornar