SPS Home   >  Dgreath   >   Cascading Style Sheet Selectors

CASCADING STYLE SHEET SELECTORS

 General form:

Selector(s) {
   property1:            attribute;
   property2:            attribute;
}

Description Selector Pattern Example
Select all instances of a particular type. In this example, all "p" elements will render in red. element p {color: red)
Select all instances of an "i" element contained in a "p" type. In this example, all "i" elements contained in "p" elements will render in red but an "i" contained in a "h1" element will not. element element p i {color: red)
Select all instances of a "p" element that match this element class property <p class="myclass">  Does not effect other element types with the same class identifier or elements of this type with different class identifiers. element.class p.myclass {color: red)
Select all instances of any element where the class property matches. Thus <p class="myclass"> and  <h1 class=""myclass"> both render red text. .class .myclass {color: red)
Select the single instance of the referenced element where the id property matches. Thus <p id="myid"> will render red text. #id #myid {color: red)
Select any  instance of an "i"  element contained in a "p" element.   element > element p > i {color: red)
Select the first instance of a "p"  element immediately following an "h1" element.   element + element h1 + p {color: red)
Select any instance of a "a"  element having a defined "href" property. element[property] a[href] {color: red)
Select any instance of a "a"  element having a defined "href" property identical to the given attribute, as in this case, "index.htm.". element[property="attribute"] a[href="index.htm"] {color: red)
Select any instance of a "a"  element having a defined "href" property attribute with the value given in space separated words, as in this case, "index.". element[property~="attribute"] a[href~="index"] {color: red)
Select any instance of a "a"  element having a defined "lang" property attribute with the value given in a hyphen separated list of words, as in this case, "en.". element[property|="attribute"] a[lang|="en"] {color: red)
Select the first line of all "p"  elements. :first-line p:first-line {color: red)
Select the first letter of all "p"  elements. :first-letter p:first-letter {color: red)
Select the first child element under the "p"  elements. :first-child p:first-child {color: red)
Select the "p" element presently under the mouse cursor. :hover p:hover {color: red)
Select the "a" element where the value of the href property is not present in the location array . Only relevant for Anchor (A) tags. :link a:link {color: red)
Select the "a" element where the value of the href property is present in the location arrray. Only relevant for Anchor (A) tags. :visited p:visited {color: red)
Select all "p" elements where the language property is defined as indicated in the parenthesis e.g. <p lang="en">. :lang p:lang(en) {color: red)
Select first printed page. Only works with @page properties @page:first @page:first {page-break-before: left)
Select left hand printed page. Only relevant for @page properties @page:left @page:left {margin: 2in)
Select right hand printed page. Only relevant for @page properties @page:right @page:right {margin: 2in)
Select all cases of the referenced element and place indicated content before it. :before p:before {content: ">> "}
Select all cases of the referenced element and place indicated content after it. :after p:after {content: " <<"}
Select element having current focus.. :focus button:focus {color: red}
Select all active elements. :active button:active {color: red}
Set property of element the same as its immediate parent. inherit p {color: inherit}


NOTES:
• A style sheet consists of one or more defined styles.
• A style consists of one or more selectors associated with one or more property-attribute pairs.
• A selector can be any valid html tag (element), defined class, ID, or pseudoclass.
• Tags are indicated without the enclosing angle marks.   e.g.  <p> becomes p. In this form, the style is associated with all tags of that type.
• Classes are indicated by a preceding period.   e.g. .myclass When presented in this form, the style can be used with any tag. The html tag would reference this with the class="myclass" property.
• IDs are indicated by a preceding hash mark.   e.g. #myId This allows the style to be applied to ONE specific element. The target html tag would be identified with the id="myId" property.
• Pseudoclasses are identified with a colon separating the element and pseudoclass.   e.g. a:hover
• Classes can be linked to specific html tags and are indicated as follows: e.g. p.myclass1 p.myclass2. Thus, p.myclass is a different style from h1.myclass.
• A backslash can be used to escape embedded quotation marks when needed.