Example of selectors

.question {font-weight: bold } (solitary class selector)
p.question {font-weight: bold} (regular class selector)
body {font-weight: bold} (element selector)
p#question { font-weight: bold} (ID selector)
ul li strong  {font-weight: bold} (descendent selector)
ul.mylist li strong {font-weight: bold} (descendent selector for a class)
ul#mylist li strong {font-weight: bold} (descendent selector for an ID)
div>p {} (child selector)
a {}
a:link {} (psuedo selector)
a:visited{}
a:hover{}
a:active{}
p:first-letter {} (psuedo selector)
p:first-line {}
h1:before {}
h1:after {}
h1, h2, h3 {} (Group selectors)
p.introduction:active, hover,  focus {} (Dynamic psuedo selector)
p:first-child {}
strong + em {} (adjacent selector)
(some-selector) a[title] (attribute selector)
(some-selector) a[title="somevalue"] (attribute selector)

Summary of selectors

1. Solitary class selectors

.question {font-weight: bold }

Ex:
((p class="question"))this is paragraph((/p))

Style an element whose class is question

2. Regular class selectors

p.question {font-weight: bold}
((p class="question"))this is paragraph((/p))

Explicitly addressing an element and a class.

3. Type selectors

body {font-weight: bold}

Typical element based selectors. Applies to all elements of that type. To be selective you will use either a class or an ID.

4. ID selectors

((p ID="question"))this is paragraph((/p))
p#question { font-weight: bold}

An ID is like a class but is unique. IDs are typically used for DIVs that uniquely style that DIV. Navigation bars are typical examples of this behavior.

5. Solitary ID selectors

#question {font-weight: bold}

Like classes, IDs can be styled with out their parent element to which they belong, although it might be a good practice to use the parent names as in item 4.

6. Descendant selectors

ul li strong  {font-weight: bold}

This means apply the above style to only the "strong" that is a descendent of "li" that is a descendent of "ul". Descendent collectors are used quite often to narrow the selection.

ul.mylist li strong {font-weight: bold}

Descendent selectors are very effective when used in combination with class or ID selectors. For example the above style applies only to a list that is tagged with class "mylist" and the specified descendents of that list

ul#mylist li strong {font-weight: bold}

This is an example of using an ID selector along with descendent selectors

7. psuedo selectors

a:link {}
a:visited{}
a:hover{}
a:active{}

These are called psuedo selectors for a reason. The explanation is that there is no element called a:link. a:link is just a state that belongs to the element "a". But for styling purposes a:link is given the status of a psuedo elementf or selection purposes. In general psuedo selectors seem to be identified by a : after the primary element to which they belong in some sense.

8.First letter and first line

p:first-letter {}
p:first-line {}

These selectors give the ability to individually style the first letter and first line of an html element. I believe this should work with h1 h2 etc. as well. I am not sure though how they designate so mething as first line. Does it have to end in a period or a new line. May be new line. I haven't looked into it.

9. before and after

h1:before {}
h1:after {}

Apparently you can add some additional stuff before and after a certain element using these selectors. I haven't looked in to see how this completely works. But the facility is there for the taking.

10. Group selectors

h1, h2, h3 {}

You can use a comma separated list of selectors to style all of them the same time.

11. Dynamic psuedo selectors

p.introduction:active, hover,  focus {}

On the lines of a:link. I don't remember why these are called dynamic psuedo selectors.

12. Child selector

div>p {}

Similar to descendent selectors. Unlike descendent selectors, a direct child relationship is enforced here. For instance the above example says "Any paragraph that is directly a child of of div"

13. first-child

p:first-child {}

any paragraph when it is the first element contained by its parent. First child selectors select a specified element if, and only if, it is the first element contained by its parent element. It doesn't matter what this parent element is.

14. Adjacent selectors

strong + em {}

I am not fully sure how these are used for benefit. I might elaborate this in the next rev

15. Attribute selectors

(some-selector) a[title]
(some-selector) a[title="somevalue"]

This almost like a query language to choose selectors. This should help in styling a web site with out changing the existing content. Other uses are quite open to imagination.

<style>
pre strong
{
    color:green;
    font-size:14;
}
</style>