The Cascading Style Sheet 2 standard (CSS2) is a great way of pre-defining styles for rendering HTML elements in the client’s browser. Going one step further, CSS2 selectors allow the style definitions to be extended to descendants and child nodes.This minimizes repetitious class and style attribute assignments. The example below uses a div element wrapped around a ul and subsequent li elements.
The ul element is a descendant of the div element and the li element is a descendant of the ul element. The sample code below shows how to set the style for the li elements using CSS selector syntax. This eliminates the need to set the class or style attributes for each li element in the list.
CSS Selector Syntax
To see how this works, paste the code views into your editor.
Code view: paste into the head section
Code view paste this into the document body section
As you can see, CSS selectors are a powerful way to apply formatting given various constructs. It saves a lot of time and trouble when developing web sites. CSS2 is widely implemented in the recent browser versions as well as legacy versions. Some references on CSS2 and selector syntax is provided below
This post is part of the series: Web Design using DHTML and the DOM
Creating web sites with DHTML based on the DOM can increase server performance, lower bandiwdth utilization and solve most cross-browser compatibility issues.
- Validating Input at the Client: Check for blank or required fields
- Validating Input at the Client: trim the field
- Validating Input at the Client: check numeric value fields
- Leveraging CSS Styles
- DOM getElementsByTagName Method for Bulk Element Formating