standard selector
RULES:
- list the selector
- list the style inside {}
- the style applies to every instance of the selector
EXAMPLE:
- h1 {color: red; font-weight:bolder;}
muliple selector
RULES:
- list multiple selectors separated by a comma
- list the shared style inside {}
- the style applies to every instance of the selectors
EXAMPLE:
- h1, h2, h3 {color: red; font-weight:bolder;}
contextual selector
RULE ONE:
- list a selector preceeded by a div tag
- list the style inside {}
- the style only applies to the selector contained within div tag
EXAMPLE ONE:
- div h1 {color: red; font-weight:bolder;}
RULE TWO:
- list selectors not separated by commas
- list the style inside {}
- the style applies only to the last selector listed
EXAMPLE TWO:
- p h1 {color: red; font-weight:bolder;}
contextual Selector — child
RULES:
- list two selectors separated by >
- list the style inside {}
- the style applies only to the second selector listed, which is the child of the first selector
EXAMPLE:
- p > h1 {color: red; font-weight:bolder;}
"class" versus "id"
RULES:
- a class is defined by a period preceeding the name of the class followed by the rule listed inside {}... the rule is applied to every instance of the class appearing on the page unless contextual selectors are used.
- an id is defined by a # preceeding the name of the id followed by the rule listed inside {}... an id can appear only once on a page
EXAMPLES:
- .big-text {font-size:28px; font-weight:bolder;}
- #container{ ...list of CSS rules... }
universal selector
STAR SELECTOR:
- list the style preceded by *
- list the style inside {}
- the * means "anything" so it will be applied to all selectors on the page that can accept the style
EXAMPLE:
- * {color: red; font-weight:bolder;}
GRANDCHILD SELECTOR:
- list a selector followed by * which is then followed by a second selector
- list the style inside {}
- the second selector becomes the "grandchild" of the first selector no matter what the second selector's parent tag is
EXAMPLE:
- p * h1 {color: red; font-weight:bolder;}
adjacent sibling
RULES:
- list a selector followed by + which is then followed by a second selector
- list the style inside {}
- the second selector becomes the "sibling" of the first selector, meaning they share the same parent tag
EXAMPLE:
- p + h1 {color: red; font-weight:bolder;}
attribute selector
RULES:
- list the tag followed by an attribute enclosed in []
- list the style inside {}
- only tags with the given attribute will display the style
EXAMPLE:
- img[default-border] {border: 1px solid #000000;}
pseudo-classes
DEFINITION
- "pseudo-classes" are classes that are not attached to tags but cause rules to be applied when certain events occur
- the most common use is with hyperlinks (a tags) although they may be used with other tags as well (i.e. p tags)
FOUR ANCHOR LINK PSEUDO-CLASSES
- LINK: the state of link before it has been clicked on
- VISITED: the state of the link that has been clicked on
- HOVER: the state of the link being pointed at
- ACTIVE: the state of the link currently being clicked on
EXAMPLE:
- a:link {color:white; text-decoration:none;}
- a:visited {color:gray; text-decoration:none;}
- a:hover {color:pink; text-decoration:none;}
- a:active {color:red; text-decoration:none;}
other pseudo-classes
:FIRST-CHILD
- x:first-child selects the first child element with the name x
- this pseudo-class can be applied to any block
example:
- h1 b:first-child
:FOCUS
- x:focus selects the tag with the name x only when the user clicks on it
- primarily used in text fields of a form where characters appear when the use types
example:
- input:focus
pseudo-elements
:FIRST-LETTER
- x:first-letter - creates a given effect for the first letter of element x
example:
- p:first-letter {font-weight:bolder; font-size:18px;}
:FIRST-LINE
- x:first-line - creates a given effect for the first line of element x
example:
- p:first-line {font-weight:bolder; font-variant:small-caps;}
:BEFORE & :AFTER
- x:before & x:after — creates a given effect before & after element x
example:
- if time is set to 2...
- hi.time:before {content: "Be here at "}
- hi.time:after {content:" PM"}
- results in "Be here at 2 PM"
