syntax for a standard selector
A multiple selector selects more than one tag to apply a style to.
Here's an example of a multiple selector:
h1, h2, p{ color:blue; }
A contextual selector will select and style a tag in a specific context to apply a style to it.
For example a contextual selector would select a em tag, but only when it is in a P tag.
Here is an example of a contextual selector:
p em{color: blue;}
A child selector only selects a tag when it is the child of a specific tag.
Here's an example of a child selector:
p>em{color:green;}
The em tag is selected, but only if it is the child of a p tag, meaning it must be directly nested within
the p tag, not nested within another tag, which is also nested in a p tag.
Use a class when you want to be able to have a style applied to multiple incidences of a tag, or a group of tags..
Use an id when you want a unique element (ie an element that will have only one incidence per page).
The universal selector which looks like this: *
Is used when you want to apply a style to everything on a page (of course you can later exclude elements on the page from that otherwise universal style). An example of a universal selector is *{color:red;} It would make all the font on the page red.
An adjacent sibling selector selects tags which are at the same level in the markup heirarchy, meaning they share the same parent.
An example of an adjacent sibling selector is: h3 + h1.
An attribute selector selects an element, but only if it has a specific attribute.
For example img[title] {border: none;}would select any image with a title attribute and set its border to none.
Psuedo classes are named such because while they are classes, they are not in fact actually attached to tags in the markup. They will cause rules to be applied when certain events occur. The most commonly used pseudo classes are used with hyperlinks. For example the link psuedo class applies to a link that is not being interacted with, it's just sitting there, while the hover psuedo-class applies to something (typically a link) that currently the mouse cursor is hovering over.
Here's all the pseudo-classes commonly applied to links for reference:
a:link
a:hover
a:visited
a:active
Other userful psuedo-classes besides the ones mainly or exclusively used on hyperlinks include the :firstchild pseudo-class which would look like x:firstchild. It selects the first child element with the name x.
Another pseudo-class is :focus. For example x:focus would apply to an element named x when it has the focus (when the user clicks on it).
Pseudo-elements create the effect of extra markup elements appearing in a document even though you haven't actually added any additional markup.
For exmple x:first-line enables you to style the first line of text (usually within a paragraph).