Selector de elemento de CSS

Selector de elemento de CSS

Los selectores CSS más comunes son los selectores de elemento. En otras palabras, los elementos del documento son los selectores más básicos.

Cuando se establece un estilo en HTML, el selector generalmente será algún elemento HTML, como p, h1, em, a, e incluso puede ser html en sí mismo:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Intente hacerlo usted mismo

Se puede cambiar un estilo de un elemento a otro.

Supongamos que decide aplicar un estilo gris a los párrafos anteriores (en lugar de los elementos h1). Solamente tiene que cambiar el selector h1 a p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Intente hacerlo usted mismo

Selector de tipo

En los estándares de W3C, el selector de elemento también se conoce como selector de tipo (type selector).

“El selector de tipo coincide con el nombre del tipo de elemento del documento. El selector de tipo coincide con cada instancia del tipo de elemento en el árbol del documento.”

Las siguientes reglas coinciden con todos los elementos h1 en el árbol del documento:

h1 {font-family: sans-serif;}

Por lo tanto, también podemos aplicar estilos a los elementos de un documento XML:

Documento XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Recordatorio</heading>
<body>¡No olvide la reunión!</body>
</note>

Documento de CSS:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

Ver efecto

A través de los ejemplos anteriores, puede ver que el selector de elemento de CSS (selector de tipo) puede establecer estilos para elementos de documentos XML.

Si necesita más información sobre cómo agregar estilos a documentos XML, visite Tutoriales de XML.