CSS Element Selector

CSS Element Selector

The most common CSS selector is the element selector. In other words, the elements of the document are the most basic selectors.

When setting HTML styles, the selector is usually some HTML element, such as p, h1, em, a, or even html itself:

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

Try it yourself

Styles can be switched from one element to another.

Suppose you decide to set the above paragraph text (not the h1 element) to gray. Just change the h1 selector to p:

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

Try it yourself

Type selector

In the W3C standard, element selectors are also known as type selectors (type selector).

“Type selectors match the name of the element type in the document language. Type selectors match each instance of the element type in the document tree.”

The following rules match all h1 elements in the document tree:

h1 {font-family: sans-serif;}

Therefore, we can also set styles for elements in XML documents:

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

View Effect

From the above examples, you can see that CSS element selectors (type selectors) can set the style of elements in XML documents.

If you need more knowledge about adding styles to XML documents, please visit CodeW3C's XML Tutorial.