GeoffKnagge.com

Selectors

Recall that these are the HTML elements to which style information is applied. However, you can be more specific...

Selecting by Class

By assigning elements "classes", you can use these class names to specify style:
  <STYLE TYPE="text/css">
    H1.classname { ..... }
    .class2  {style information for all elements with class=class2}
  </STYLE>
.....
  <H1 CLASS=classname>This text will be affected by the above SYTLE info.</H1>
  <H2 CLASS=class2>So is this text</H1> 
 

Selecting by ID

It is possible to use the id attribute in HTML tags to specify style information. The element is identified by placing ID=NameOfYourChoice in the opening tag. The style information is then specified by using the form
 elementname#ID_Name { .... }

<STYLE> 
	#id1 { color:green}	
           (make the color green for all text in any element with ID=id1)

	H1#id2 { color:blue}
           (all H1 elements with ID=id2 are displayed in blue)
</STYLE>
.....
  <P ID=id1>green text</P>
  <H2 ID=id2>blue text</h2>

Contextual

You can specify that style is only applied to elements which have certain "parents" (elements which they are contained within).
e.g.
  H1 EM { styleinfo };         /*all EM text within a H1 tag*/
  UL UL LI { styleinfo };      /*all LI items within two UL sets*/
  .classname H1 { styleinfo }; /*all H1 within elements with CLASS=classname*/
  #IDname H1 { styleinfo };     /*all H1 text within elements with ID=IDname*/
  DIV.IDname H1 { styleinfo };	/*all H1 text within DIV tags with ID=IDname*/

Pseudo-classes and pseudo-elements

Note that in a contextual selector, pseudo-elements are only allowed at the end of the selector.

Anchor pseudo-classes

Style can be applied to the three types of anchor links (normal, visited, active), as indicated in the following examples...
  A:link { styleinfo }         /* unvisited link */
  A:visited {styleinfo }   /* visited links */
  A:active { styleinfo }    /* active links */
  A:link IMG { styleinfo } /* all IMGs that are part of an unvisited link */
 A.classname:visited { styleinfo } /* visited links with CLASS=classname */

The first-line pseudo-element

    P:first-line { styleinfo }  
        /* the first line of text for each instance of that element */
The 'first-line' pseudo-element can only be used with a block-level elements, and can only be given the following property types : font, color, background properties, 'word-spacing' , 'letter-spacing' , 'text-decoration' , 'vertical-align', 'text-transform' , 'line-height', 'clear' .

The first-letter pseudo-element

'first-letter' pseudo-elements can have the following properties: font, color, background, 'text-decoration' , 'vertical-align (if 'float' is 'none'), 'text-transform' , 'line-height' , margins, padding, border, 'float' , 'clear' To make a dropcap letter span two lines:
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
The display program (a web browser) defines what characters are inside the 'first-letter' element. Normally, quotes that precede the first letter should be included. Otherwise, the first-letter information is usually ignored if the block starts with a non-letter character.

Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.