There are several ways you can identify a selector
standard selector - list the tag you want to create a style for (do not include the <>
p {color:red; font-size:2em;}
multiple selector - create 1 style that applies to several tags, list the selectors seperated by commas
h1, h2, h3 {text-transform:lowercase;}
contextual selector - list selectors in the order they need to appear in order for the style to apply. In the sample listed below the browser must first find a <h1> tag and within that tag a <em> tag needs to be located. Contextual selectors let you fine tune your selector request so that one style can be created for an <em> tag within the <h1> tag, and another style can be created for an <em> tag that is within the <p> tag.
h1 em {color:red;}
p em {color:green;}
contextual selector - child this code requres the second tag to be the child of the first tag
p>em {color:purple;}
adjacent sibling selector - 2 selectors that are both siblings and are next to each other in the markup.
h1 + p {font-variant:small-caps;}
attribute selector - a selector which is defined by a tag and an attribute
img[title] {border:2px solid blue;}
only image tags which have the "title" attribute will display this style
img[alt="SRT"]
only an image tag with an "alt" attribute with a value of "SRT"
universal selector - applies to all tags that are able to inherit the properties styles
* {color:#purple;}
This affected the <h1>, <h2> , <p> , and <a> tags. It did not affect the <img> since color did not apply to that tag.
grandchild selector - the second tag must be the grandchild of the first tag
h1 * span {font-style:italic;}
class - a period followed by the class name (which you select). Classes can be used several times on a page.
.smoot {font-family:Palatino, serif;}
this class would apply to any tag which had the "class" attribute and a value of "smoot" ie <h1 class="smoot"> or <p class="smoot">
specific class - a class which is applied to a specific tag
span.smoot {font-style:italic;}
this class will only work with the span tag that has a class of smoot <span class="smoot">
id - a # sign followed by the id's name. Id's can only be used once on a page
#smoot {font-weight:bold;
pseudo-class - a tag which has a specific state applies to it. (often used with the <a> tag) List the tag, a colon, and the state
a:link {color:#CC0033;}
a:hover {color:#FF0033;}
a:visited {color:#990033;}
a:active {color:#FFFF33;}
pseudo classes [part2] - first-child or focus - the first child value could be assigned to any block element, the focus value should be applied to an element which is clicked on
p strong:first-child
This style would apply to the first strong tag within a paragraph, but not the second, third, etc
input:focus
pseudo classes [part 3]
nth-child
li:nth-child(3) picks third item in a list
li:nth-last-child(2) - picks second from end of a list
li:nth-of-type
li.fav:nth-of-type(4) picks the 4th list item with a class of "fav"
li-fav:nth-of-last-type(2) picks the 2second from last item with a class of "fav"
last-child
p:last-child - picks the last paragraph on the page
pseudo elements - first-letter, first-line - these elements can be assigned to any block element
p:first-letter {font-size3em;}
div:first-line {font-variant:small-caps;}
These selector guidelines can be combined ie... a contextual pseudo class:
#nav a:hover {text-decoration:underline;}
or a multiple selector that references a contextual selector (id and h1) and another contextual selector that uses a class, an example of one of the other pseudo classes (smoot, p:first child)
#heading h1, .smoot p:first-child;}
The rule listed above is fairly complex, don't expect to create htis type of code right away. As you work with the code more you encounter situations where you need a complex solution like the one listed above.
In addition, there are often many ways to achieve the same result with CSS. As a beginner you may need to use several rules to accomplish what an advanced user can achieve in one rule. Create the code in a way that makes sense to you, and refine your technique as you learn more.