CSS Pseudo Class Selectors

What about the Pseudo-Class Selectors.

  • Pseudo-Class selectors let you assign styles to structures that don't necessarily exist in the document.
  • Pseudo-class selectors cause rules to be applied when certain events occur.
  • This can for instance be that the user points at or clicks on something. (For example, a pseudo-class can cause a backgound color appear on an image when the pointer rolls over it.)
  • Pseudo-classes are most commonly used with hyperlinks (a elements), enabling CSS type to take action when the mouse rolled over it.

Four types of Pseudo-classes


  1. CSS 2.1 defines two pseudo-classes that apply only to hyperlinks.
    Name Description
    :link Refers to any anchor that is a hyperlink and points to an address that has not been visited.
    :visited The user has clicked on the link at some point in the past.

    The two states are mutually exclusive. Example of the Link pseudo-classes selector.
    <html>
      <head>
        <style type="text/css">
          a:link {color: blue;}    /* unvisited links are blue */
          a:visited {color: red;}   /* visited links are red */
        </style>
      </head>
      <body>
        Do you like to visit
       <a href='http://www.e-source4u.com' >www.e-source4u.com</a> now?
      </body>
    </html>

  2. Dynamic pseudo-classes:


    CSS 2.1 defines three pseudo-classes that can change a document's appearance as a result of user behavior.
    Name Description
    :focus Applies while an element has the focus (accepts keyboard events or other forms of text input).
    :hover Applies while the user designates an element, but does not activate it.
    :active Applies while an element is being activated by the user.
    Example of the Dynamic pseudo-class selectors.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <style type="text/css">
          a:link    { color: red }    /* unvisited links */
          a:visited { color: blue }   /* visited links   */
          a:hover   { color: yellow } /* user hovers     */
          a:active  { color: lime }   /* active links    */
          input:focus { background-color: yellow }
          i:hover   { background-color: blue } /* user hovers     */
        </style>
      </head>
      <body>
        Note that <i>A:hover</i> must be placed after the A:link and A:visited rules,
           since otherwise the cascading rules will hide the 'color'
           property of the A:hover rule.<br/>
       Do you like to visit
       <a href='http://www.e-source4u.com' >www.e-source4u.com</a> now?<br/>
       Write something in the input field <input type'text' size='10' />
       to see the background color when it has focus.
      </body>
    </html>
    Note: For dynamic pseudo-class selectors to work in IE a <!DOCTYPE> must be declared.
  3. Selecting a first child:

    Name Description
    :first-child Used to select elements that are the first children of other elements.
    Example of the pseudo-class, first child, selector.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <style type="text/css">
          p:first-child {font-weight: bold;}
          li:first-child {text-transform: uppercase;}
        </style>
      </head>
      <body>
        <div>
          <p>These are the necessary steps:</p>
          <ul>
            <li>Insert key</li>
            <li>Turn key <strong>clockwise</strong></li>
            <li>Push accelerator</li>
          </ul>
          <p>
            Do <em>not</em> push the brake at the same time as the accelerator.
          </p>
        </div>
      </body>
    </html>

    In this example, the elements that are first children are the first p, the first li, and the strong and em elements. Note: For :first-child to work in IE a <!DOCTYPE> must be declared.
  4. Selecting on language:

    Name Description
    :lang( ) Used to select an element based on its language.

    *:lang(fr) {color: red;}
    This will set red color on any element with attribute lang='fr' (French).
    Example of the pseudo-class, first child, selector:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <style type="text/css">
          *:lang(fr) {color: red;}
        </style>
      </head>
      <body>
        <div>
          <p lang='fr'>These are the necessary steps:</p>
          <ul>
            <li>Insert key</li>
            <li>Turn key clockwise</li>
            <li>Push accelerator</li>
          </ul>
          <p>
            Do <em lang='fr'>not</em> push the
              brake at the same time as the accelerator.
          </p>
        </div>
      </body>
    </html>
    In this example, the elements that are first children are the first p, the first li, and the strong and em elements. Note: For :lang() to work in IE a <!DOCTYPE> must be declared.

© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.