In the previous part of the Cascading Style Sheets (CSS) 101 series, we discussed how to handle multiple rules for an element. This article discusses another important CSS feature: selectors, which can be used to select elements within a page to stylize a Web page.
Selector type
CSS styles have many ways to implement element selection. The various selection methods include selection via universal selector, type selector, class selector, ID selector, ancestor selector, descendant selector, adjacent sibling selector and attribute selector.
Here we'll look at each of these methods individually (except for adjacent siblings and attributes, which we'll discuss next week). Note: Browser support for CSS selectors is inconsistent, but you can use the online instructions to check whether a certain selector works in your target browser.
Universal
Universal selectors allow you to use styles throughout the page. Basically, a style does not specify a specific element, class, etc., so it applies to all elements on the page. This is useful for setting colors, fonts, etc.
Universal selectors can be used for all elements on the page, but they can be overridden by specific selectors. The CSS specification states that an asterisk (*) can be used to represent a universal selector. Listing A demonstrates how to use universal selectors to set the background and default font for the page.
type
One of the most common ways to style an element is through its type. This means that a specific element has its own defined style, and this style can be used for all elements of that type regardless of the element's position on the page. The example in Listing B demonstrates using a type selector to style all segment elements on the page.
With this type of selector, all paragraph elements within the leaf (unless overridden by more specific selectors) have specific margins and red text. Now you can also create your own CSS classes to handle styling specific elements on the page.
kind
Class selectors give you more control than type selectors when it comes to deciding what a style covers. Styles defined by a class selector can be applied to all elements with a class attribute, regardless of the element's position on the page. It provides great control over which elements receive styles. The example in Listing C demonstrates using a class to format only the first paragraph in a page. So the first paragraph has a jagged font, and the following paragraphs are different.
Class selectors cannot use HTML reserved elements such as heading, p, h1, etc. You can also use multiple classes for the same element by separating them with spaces. Listing D demonstrates the use of multiple classes to style a specific paragraph.
You can combine class selectors with type selectors to style certain elements that have assigned classes. In this scenario, when defining styles, the element name has a class name separated by spaces. The example in Listing E demonstrates the technique whereby only segment elements that are given a specific class name are styled one way, while headers that have the same class name are stylized another way. I'll go into more detail when using the element's ID attribute.