CSS Element Selectors

CSS Element Selectors

De meest gebruikte CSS-selectors zijn element selectors. Met andere woorden, de elementen in het document zijn de basis van de selectors.

Als je stijlen instelt voor HTML, is de selector meestal een HTML-element, zoals p, h1, em, a, of zelfs html zelf:

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

Probeer het zelf

Stijlen kunnen worden overgezet van een element naar een ander element.

Stel dat je beslist om de bovenstaande paragraaftekst (in plaats van het h1-element) grijs te maken. Je hoeft alleen de h1-selector te wijzigen naar p:

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

Probeer het zelf

Type selector

In de W3C-standaard wordt de element selector ook wel type selector (type selector) genoemd.

“Type selectors matchen de naam van de elementtype van de documenttaal. Type selectors matchen elke instantie van dit elementtype in de documentstructuur.”

Deze regels passen op alle h1-elementen in de documentstructuur:

h1 {font-family: sans-serif;}

Daarom kunnen we ook stijlen instellen voor elementen in XML-documenten:

XML document:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS Document:

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;
  }

Bekijk Effect

In de bovenstaande voorbeelden kun je zien dat CSS element selectors (type selectors) de stijl van elementen in een XML-document kunnen instellen.

Als je meer wilt weten over het toevoegen van stijlen aan XML-documenten, bezoek dan de XML Tutorial.