Universal Selector

The Universal selector matches any element. You should consider the below cases, where using the "*" selector would be obsolate.

• *.class and .class are equivalent.
• *#id and #id are equivalent.
• *[lang=en] and [lang=en] are equivalent.

For instance the universal selector can be used to remove all whitespace, allowing you to define your own styles for all elements, see below.

* {
  margin: 0;
  padding: 0;
}

Type Selectors

A type selector matches all instances of the given element'(s) in the document tree.

p {margin-top: 0.2em;} /* Matches all instances of P */

Descendant Selectors

Descendant Selectors take precedence over Type Selectors, this allows you to do the following easily.

em {
  font-weight: bold;
}
h1 em {
 /* Takes precedence over the Type Selector and matches any child or later descendent of h1. */
font-weight: bolder;
}

Child Selectors

Consider the below example, where the pattern matches p elements who are children of body.

body > p {
  color: blue;
}

The following example combines Descendant Selectors with Child Selectors.

#CenterContent > div.BorderBox p {
  /* Matches P elements who are descendants of a division with the class "BorderBox", the "div.BorderBox" must be a child of "#CenterContent" */
  margin-top: 0.2em;
}

The :first-child pseudo-class

The :first-child pseudo-class matches all the first children of an element. The following Example will match all p elements which is the first child of a division element.

div > p:first-child { text-indent: -0.3em; }

The link pseudo-classes

The User Agent (AKA: The Browser), display unvisited links differently from previously visited ones. This is where CSS provides The link pseudo-classes, which allows the author to control this difference.

• The :link pseudo-class matches links that have not yet been visited by the user.
• The :visited pseudo-class matches links link which has been visited by the user.

Consider the following example:

a:link { color: purple; } /* Unvisited Links */
a:visited { color: black; } /* Visited Links */

The dynamic pseudo-classes

The dynamic pseudo-classes is the response to certain user actions, such as hovering an element, or activating an form element.

• The :hover pseudo-class applies when and while the user hovers an element.
• The :active pseudo-class applies while an element is active.
• The :focus pseudo-class applies when and while an element is in focus, I.E. Submit forms.

Lets combine The link pseudo-classes with some of The dynamic pseudo-classes to make enhance UI functionality and make the UI more appealing, Example below:

a:link { color: purple; } /* Unvisited Links */
a:visited { color: black; } /* Visited Links */
a:hover { color: red; } /* Links when Hovered */
a:active { color: blue; } /* Active Links */

Note. a:hover must be placed after the a:link and a:visited rules, otherwise those just overwrite the hover rule. Finally a:active is placed after a:hover, which in this case means last.

The :lang() pseudo-class

If the document specifies the actual language, it is possible to write selectors matching by those, example below:

q:lang(en) {
  quotes: '"' '"' "'" "'";
}
q:lang(no) {
  quotes: "«" "»" "'" "'";
}

Adjacent Selectors

The Adjacent selectors matches an element which is immediately preceded by another, consider the below example:

h1 + p { text-indent: 1em; }

The above would indent all the first paragraphs appearing after an h1 element.

Attribute Selectors

There are a number of ways to use Attribute Selectors.

• [att] Matches all Elements with the "att" Attribute set, regardless of its value.
• [att=val] Matches all Elements with the "att" Attribute set exactly to "val".
• [att~=val] Matches all the element'(s) with their "att" attribute value set to a space-separated list of words, where one exactly is "val", the words themself may not contain spaces.
• [att|=val] Matches all the element'(s) with their "att" attribute value set to a hyphen-separated list of words, beginning with "val", the match starts at the beginning.

The following example matches an img element, with its "alt" attribute set.

img[alt] {
  border: 1px solid orange;
}

The next matches an p element with its class attribute set to "opener"

p[class=opener] {
 /* Equilivant to p.opener */
  text-indent: 1em;
}

Here are some useful examples of the last two options. Many websites like to indicate External link'(s), while there isn't any standard way of doing this, its usually done by the use of the "rel" attribute set, with a space-separated list of words including "external" as one of them to indicate the external link, see below:

<a href="http://www.beamtic.com/" rel="external nofollow">Beamtic.com</a>

Now, while a[rel="external"] would match any a element with its "rel" attribute set exactly to "external", it wouldn't match the elements where "nofollow" was applied as well, this is where "~=" come in, if the list where hyphen-separated, you would simply use "|=" instead.

a[rel|=external]

You can also combine multiple rules, the below will only match an h2 element with an class and id applied.

h2[class][id] {
  color: red;
  wont-weight: 2em;
}

Class Selectors

HTML elements can have one or more classes assigned in their class attribute, each class separated by a space character.

The easiest way to type a class selector is by the use of the following syntax .name_of_class { property1:value;property2:value; }; consider the below example.

.ContentBox {
  width: 95%;
}

However there may be cases where you would want the ContentBox inside #LeftContent to be different from #CenterContent, consider the below example:

#CenterContent > .BorderBox { width: 90%; }
#LeftContent > .BorderBox { width: 95%; }

There might even be cases where you would want to specify which element'(s) the rule must match, and as such narrowing the rule further down, see below.

div#CenterContent > div.BorderBox { width: 90%; }
div#LeftContent > div.BorderBox { width: 95%; }

Id Selectors

An ID selector is used to uniquely match a single element on a page. There can only be one occurrence of each ID throughout a document.

In HTML, IDs are also commonly used to link to sections in a document; example follows:

<a href="/#Section2">Section 2</a>

The id is often applied to a heading such as h1-h6 or it is applied section elements; you can then link to these sections on a page in the href attribute on links.

Styling elements by their ID can be done like this:

#Basement {
  width: 90%;
  max-width: 1600px;
  min-width: 800px;
}

In this example, i simply give the Basement division a width, min-width, and max-width. I didn't say specifically that the id must occur on a division tag, since i would know exactly which tag i used the id on. Above example would be the equivalent of div#Basement, given that "Basement" actually was applied on a div element, of course this would just add to the file-size.

Grouped Rules

Rules can also be grouped, for elements who share the same styles, see example below:

#LeftContent, #RightContent { position: absolute; }
h1, h2, h3, h4, h5, h6 { color: blue; }

I will leave it up to you to find more combinations of the mentioned rules.

Tell us what you think: