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.
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.
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="Emw3class"> then address in the style sheet as .emw3class { 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="Emw3class">...</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.
An ID selector is unique, on each page there can only be one occurence of each ID.
Assign in html as <p id="emw3id"> then address in the style sheet as #emw3id { cssrule: value; }
If a suitable element does not already exist for the area you need to style, then add a DIV: <div id="emw3id">...</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.
To apply a CSS rule to more than one selector, list the selectors separated by commas:
Selector1 , Selector2 { cssrule: value; }e.g.
.myheaderclass, #emw3id { border: 0; }
.myheaderclass, img { border: 0; }
This will apply the style to elements that have any of the selectors listed (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:
.class1.class2 { cssrule: value; }e.g.
.myheaderclass.democlass { border: 0; }
.myheaderclass#someid { border: 5; }
img.promoclass { border: 7; }This will apply the style to elements that have both classes (an AND operation).
While it is possible to use this syntax with ID selectors an # ID is already unique, so there is no point.To ensure your CSS is efficient and fast, don’t qualify ID rules with tag names or classes (use #someid rather than button#someid)
and similarly don’t qualify class rules with tag names (use .myclass rather than img.myclass)
Additional qualifying selectors will decrease performance because the rules are parsed from right to left.If you are tempted to include tag names in a CSS rule for readability, consider changing the name of the ID or Class instead.
Descendant selectors are used to select elements that are descendants of another element.
List the elements in a CSS selector separated by spaces:element element { cssrule: value; }For example,you might have a list item <li>, containing anchor <a> elements.
The anchors are descendants, so the rule will look like this:li a { cssrule: value; }One thing to be aware of is that these selectors are 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. If there is a single #id or .class which would identify the target item then that single item may perform faster than a descendant selector.
e.g.
myheaderclass p { border: 0; }
for each <p> element, the browser must traverse up the DOM tree, evaluating every ancestor element until it finds a match (myheaderclass)In older browsers (prior to around 2010) descendant selectors will perform much slower than some of the alternatives listed below.
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.
myheaderclass> 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 (myheaderclass)
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 + myheaderclass { border: 0; }
for each myheaderclass element, the browser will traverse up the DOM tree to see if its immediate predecessor matches (h1)
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 ~ myheaderclass { border: 0; }
for each myheaderclass element, the browser will traverse up the DOM tree to see if its parent matches (h1)
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:
Specificity - Which rules take precedence in CSS.
CSS Attribute selectors
Inheritance - Cascading styles.
Pseudo classes - Format Anchor links and Drop Caps.
Optimize browser rendering - Google.
Writing organised CSS - Mozilla.
Selectors - W3C.