CSS Class and ID selectors

CSS stylesheets can address elements of the page with several degrees of selectivity.

CSS selectors are not case sensitive; this includes class and ID selectors.
But HTML class and id names are defined to be case-sensitive in HTML 4.01 and above. (In the HTML spec this is shown as [CS] for Case Sensitive.) For this reason it is a good idea to be consistent in the use of UPPER and lower case names, the most common naming convention is all-lower-case-separated-with-dashes.

HTML Types

The most basic CSS styling is to directly address html elements,

This allows you to style all occurences of a particular HTML element. For example all <p> or all <h1> elements.

No changes to the HTML markup are required, just address within the style sheet as p {cssrule: value;} or h1 {cssrule: value;}

This method is easy to maintain because everything is in the CSS stylesheet, but it does generally require you to write all the HTML markup before starting to write the CSS.

.Class

Multiple class selectors can be defined on a page.

This allows you to style multiple occurences of a particular HTML element. For example if you have 10 paragraphs but wish to style 5 differently then create and apply a style to just those 5.

Assign in html as <p class="ss64class"> then address in the style sheet as .ss64class { cssrule: value; }

More than one class can be applied to the same element/div:

<img class="button red">
<img class="button blue">

If a suitable element does not already exist for the area you need to style, then add a DIV: <div class="ss64class">...</div>

A CSS class name must begin with a letter(a–z), an underscore (_) or a dash (-), followed by any number of dashes, underscores, letters, or numbers. The leading dash or underscore are reserved for vendor prefixes.

#ID

An ID selector is unique, on each page there can only be one occurence of each ID.

Assign in html as <p id="ss64id"> then address in the style sheet as #ss64id { cssrule: value; }

If a suitable element does not already exist for the area you need to style, then add a DIV: <div id="ss64id">...</div>

Assigning a style via an ID will over-ride the class structure, an ID is the most specific way of selecting an element, this has the downside that inheritance of new style changes through the DOM will no longer be possibe because the ID style will always take precedence.

IDs are ideal for targeting in javascript where a unique identifier is required.

Multiple selectors

To apply a CSS rule to more than one selector, list the selectors separated by commas:

      Selector1 , Selector2 { cssrule: value; }

e.g.
.ss64classA, #ss64ID { border: 0; }
This will apply the style to elements that have either class (in binary an OR operation).

To apply a CSS rule to elements that match two (or more) selectors, list the selectors without any separating spaces or commas:

      .Selector1.Selector2 { cssrule: value; }

e.g.
.ss64classA.ss64classB { border: 0; }
This will apply the style to elements that have both classes (in binary an AND operation).
It is possible to use this syntax with ID selectors but as an # ID is already unique, there is rarely any need.

Descendant selectors

Descendant selectors will select a combination of items that are found within the markup structure. The elements are listed separated by spaces and will be evaluated by the browser engine from Right to Left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule.

      element element { cssrule: value; }

e.g.
ss64class p { border: 0; }
for each <p> element, the browser must traverse up the DOM tree, evaluating every ancestor element until it finds a match (ss64class)

In older browsers (prior to around 2010) descendant selectors will perform much slower than some of the alternatives listed below.

Child selectors

Child selectors are evaluated just like descendant selectors, but they will only select items that are direct children. Because they only look one level down the markup structure they will perform better than descendant selectors.

      element > element { cssrule: value; }

e.g.
ss64class > p { border: 0; }
for each <p> element, the browser will traverse one level up the DOM tree, evaluating those ancestor elements until it finds a match (ss64class)
For child selectors to be recognised by IE 8 you must specify a doctype and for HTML 5 may also need a javascript shiv.

Adjacent Sibling selector.

Adjacent sibling selectors are evaluated just like descendant selectors, but they will only select items that directly follow one another.

      element + element { cssrule: value; }

e.g.
h1 + ss64class { border: 0; }
for each ss64class element, the browser will traverse up the DOM tree to see if its immediate predecessor matches (h1)

General Sibling selector.

General sibling selectors are evaluated just like Adjacent Sibling selectors, with the small difference that the items being selected, don’t have to directly follow one another (but they do still need to be children). Again because they only look one level down the markup structure they will perform better than descendant selectors.

      element ~ element { cssrule: value; }

e.g.
h1 ~ ss64class { border: 0; }
for each ss64class element, the browser will traverse up the DOM tree to see if its parent matches (h1)

Universal selector.

The universal selector is an asterix (*)that will match any element. Using the universal selector as the key selector (the rightmost) will result in less efficient CSS that can take significantly longer for a web browser to render.

“Natural selection, as it has operated in human history, favors not only the clever but the murderous” ~ Barbara Ehrenreich

Related:

CSS Attribute selectors
Inheritance - Cascading styles.
Pseudo classes - Format Anchor links and Drop Caps.
Optimize browser rendering - Google
Writing efficient CSS - Mozilla
Selectors - W3C


© Copyright SS64.com 1999-2014
Some rights reserved