Grouping Selectors and Pseudo Classes |
|---|
Define Multiple Selectors
Several xhtml elements can be defined with the same property and values thus saving time. Each selector (element) is separated by a comma and the definition is in the curly brackets. Even classes and ids can be included in a single definition.
|
<style type="text/css">
p, li, td {font-size:12pt}
blockquote, .sm {text-style:bold}
</style>
|
|
Pseudo Classes -Anchors and First Letter
Pseudo classes/selectors are predefined group of elements used with style sheets. Hyperlinks or Anchors have four properties that can be changed using style rules. The state of the anchor determines the property displayed - unclicked link, visited, hover and active.
The hover pseudo-class must be listed after the link and visited pseudo-classes. The active class is listed last. Anchors can be in more than one state at a time, therefore define the classes in order.
|
| Anchor Properties and Values and Letter Properties |
a:link
a:visited
a:hover
a:active
|
a:link {text-decoration: yes} -link on the page
a:visted {color: red; text-decoration: underline}visited link
a:hover {background:yellow} mousing over link
a:active {text-decoration: none} mouse on the link
|
| first-letter | The first letter of the element text |
| first-line | First line of the element text |
|
<style type="text/css">
.links a:visited {text-decoration:none;color:#800000}
.links a:hover {color:#cc33cc;text-decoration:underline}
#firstl:first-letter{float:left; font-size:400%; line-height:0.8}
#firstl:first-line{font-variant:small-caps;color:#ff0000}
</style>
|
|
|
|