How to Work with State Selectors in CSS3 - dummies

How to Work with State Selectors in CSS3

By John Paul Mueller

There are some situations in which the dynamic state of an object is important in formatting it in CSS3. Using state selectors can help a user determine when goals have been achieved or a particular feature is unavailable (the object is disabled).

For example, an object may have a link associated with it and when the user clicks that link, the state of the link changes to “visited.” The following list tells you about state selectors that documents commonly use.

  • :link: Selects all of the unvisited links in a document.

    It’s common practice to combine state selectors with tag selectors. For example, you may not want to format all unvisited links in a document. The link for an <img> tag would most likely be formatted differently from the link for an <a> tag. Consequently, you commonly see state selectors as a:link where the formatting would affect all of the unvisited anchor links.

  • :visited: Selects all of the visited links in a document.

  • :active: Selects the link that the user currently has selected.

  • :empty: Selects an object that has no content.

  • :target: Selects the target of an object. For example, when the user clicks a link, the target of that link is selected.

  • :enabled: Selects any object that’s enabled.

  • :disabled: Selects any object that’s disabled.

  • :checked: Selects any object that’s checked.

  • ::selection: Selects the content that the user has highlighted in some way.

State selectors make it possible to change the appearance of the document to match activities that the user has performed. What this means is that the document becomes more interactive, without requiring any coding on your part. This effect is used in a number of the examples that follow, so you’ll get plenty of practice working with state selectors. The following procedure shows one method for working with state selectors.

  1. Create the ExternalCSS.HTML and ExternalCSS.CSS files and copy them to a new folder.

  2. Open ExternalCSS.HTML.

  3. Type the following code after the existing <p> tag in the file and save the changes to disk.

    <a href="#One">Select One</a><br />
    <a href="#Two">Select Two</a>
    <p id="One">One</p>
    <p id="Two">Two</p>

    This added code provides some state indicators for the example. When you click a link, the target of that link changes state.

  4. Open ExternalCSS.CSS.

  5. Type the following code after the existing styles and save the changes to disk.

     color: BlueViolet;
     background-color: Plum;
     color: BlueViolet;
     background-color: Plum;
     border: solid;
     border-width: medium;
     border-color: Red;
     background-color: BlanchedAlmond;

    Notice the use of the special -moz- preface for the second ::selection selector. This is one of your first exposures to browser compatibility issues. In order to make this selector work with Firefox, you must add this second ::-moz-selection selector with the preface.

  6. Reload the test page.

  7. Select some of the first paragraph text.

    The color of the text and its background change.

  8. Click Select One.

    The paragraph containing One changes its appearance.


  9. Click Select Two.

    The paragraph containing Two changes its appearance. The paragraph containing One returns to its original appearance.