HTML element selectors
Explanation
HTML Element selectors select any of the elements on a page that match the selector. For example, the selector em selects any em elements on the page (that is any element marked up as <em>...</em>. Similarly, the p selector selects every paragraph, that is every element marked up as <p>...</p>.
Syntax
The form of an HTML element selector is simple, it is just the tag that you use to mark up an element on an HTML page, minus the "<" and ">". Any HTML tag can be used in this way.
Some more examples are
bodyselects the<body>elementliselects any elements marked up as<li>...</li>
and so on.
Use
Using the HTML element selector, you can change the appearance of any or every element on your page. If you have correctly marked up a page using standards-based structural HTML, to use this type of selector you never have to edit your HTML again. It's a good type of selector to practice with when you first start using style sheets to get up to speed quickly with the different properties and values, and their level of support.
When people first learn about style sheets, they generally think that they are restricted to one kind of selector, this one. But that is far from the case. Once you're confident with HTML element selectors don't be afraid to start looking at all the others.
Browser support
Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.
Types of element
While we're talking about the selectors which select HTML elements, a quick word about the nature of these elements might be a good idea.
Many web developers may not be aware that the elements they use to create their web pages belong to three different types. Each type of element displays in a different way, as explained below. This is why CSS has a display property. With the display property you can, theoretically, redefine the display type of an element. In practice, browsers may (and version 4 browsers did) ignore any attempt to redefine the display type of an element. Instead, they use the display type as specified by the W3C's HTML recommendation. See the browser compatibility information for the display type property for information about current browsers in this regard.
The different types of display are:
- block
- inline
- list item
Block elements are separated from surrounding elements in the flow of the HTML page. Browsers generally give block elements a standard margin to the top and bottom. With cascading style sheets, you can redefine the margin around block elements. Examples of block elements are <p> and <h1> (etc).
Inline elements are not separated from surrounding elements in the flow, but rather follow directly on from their adjacent elements. Inline elements display just as text does on a page. Examples of inline elements are <img> and <a>.
List item elements display similarly to block elements, but in addition, a marker (a bullet, or an alpha numeric character) is added to the left of the element, and the element is indented with respect to its parent element. With style sheets an image can be specified as the marker, and different types of marker, in addition to the common disc and square, can be specified. The obvious example of a list item element is <li>. Note that both <ul> and <ol> are in fact block elements. Which makes sense if you think about it.
CSS2 adds other display types related to tables, and for generated content. These are very specialized, and for more, see our discussion of the display property.
next: class selectors
(C)1997-2001 Western Civilisation Pty. Ltd.