// References / CSS Selectors

CSS Selectors is really just a pattern-matching rule, if such a rule matches a given element, it will have the styles of the rule applied.

Examples/Reference

This is a list of selectors which may be used. Support for these is limited in older browsers.

Note. It is recommended to avoid using class and id selectors when possible, this will make your code cleaner to work with.

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, otherwhise 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.brugbart.com/" rel="external nofollow">Brugbart.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

Note. For styles used in HTML, authors may use the dot (.) notation, as an alternative to using Attribute Selectors to match the class attribute'(s).

The easist way to type a class selector, is by the use of the following syntax (dot)ClassName { property-1;property-2; }, consider the below example.

.ContentBox {
  width: 95%;
}

However there may be cases where you would want the ContentBox inside (id)LeftContent to be different from (id)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 futher down, see below.

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

Id Selectors

ID Selectors are unique, there can only be one occurrence of each id throughout a document. It is a way to uniquely identify a given element. It is also used to link to sections in documents I.E. <a href="/#Section2">Section 2</a>, where the id usually gets applied to a heading element. Finally ids may also be used to style documents, the way to refer to a element with a unique id applied is shown below:

#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 accur on a division tag, since i would know exactly which tag i used the id on. Above example would be the equilivant 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 to you to find more combinations of the mentioned rules, to optimize your css coding and Learn By Doing.