Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Work with CSS3 Attribute Selectors

Within many tags are attributes that describe tag properties. Two common attributes are the tag identifier (id) and CSS classification (class). However, CSS3 makes it possible to select objects by any attribute desired. The following list tells you about attribute selectors that you commonly use when creating styles.

  • .ClassName: Selects any objects that have a class attribute value with the given name. For example, .StdPara would select every object that has a class="StdPara" attribute without regard for object type.

  • #Id: Selects any objects that have an id attribute value with the given name. For example, #ThirdHeader would select every object that has an id="ThirdHeader" attribute without regard for object type.

  • :lang(Language Identifier): Selects any object with the specified language value. For example, :lang(en) would select any object that uses English as its language. You can find a list of common language identifiers at w3schools.com.

  • [Attribute]: Selects all objects that use a particular attribute regardless of the attribute’s value. For example, [lang] would select all objects that use the lang attribute.

  • [Attribute=Value]: Selects all objects that have an attribute with a particular value. The value must match precisely. For example, [lang="en-us"] would select every object that has a language attribute with a value of English.

  • [Attribute~=Value]: Selects all objects that have an attribute that contains a particular value. The search value need only appear somewhere within the value as a whole. For example, [title~="Secondary"] selects all objects with title attributes that contain the word Secondary as a discrete word. This selector works with whole words.

    It’s possible to further restrict many of these attribute selectors by combining them with tag selectors. For example, p[title~="Secondary"] selects only the <p> tag objects with title attributes that contain the word Secondary as a discrete word. It’s often possible to combine selectors in unique ways to create precisely the effect you want.

  • [Attribute|=Value]: Selects all objects that have an attribute that begins with a particular value. The search value needs to appear at the beginning of the value as a whole, but need not be the entire value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This selector works with hyphenated terms.

  • [Attribute^=Value]: Selects all objects that have an attribute that begins with a particular value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This form of the selector differs from the [Attribute|=Value] attribute in that it’s less restrictive. Using this form will select title="SubHeader", title="Sub Header", or title="Sub-Header" with equal reliability.

  • [Attribute$=Value]: Selects all objects that have an attribute that ends with a particular value. For example, [title$="Secondary"] selects all objects with title attributes that end with the word Secondary. This form of the attribute is nonrestrictive — it requires no special formatting.

  • [Attribute*=Value]: Selects all objects that have an attribute that contains a particular value. For example, [title$="Secondary"] selects all objects with title attributes that contain the word Secondary. This form of the selector is less restrictive than the [Attribute~=Value] attribute. Using this form will select title="SecondaryParagraph", title="Secondary Paragraph", or title="Secondary-Paragraph" with equal reliability.

Now that you have some idea of how attribute selectors work, it’s time to see them in action. The following procedure helps you understand what attribute selectors do and how you can use them to choose specific objects within a document for formatting.

  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.

    <h1 id="SecondHeader" class="SubHead"
     title="Sub-Header">
     Another Heading
    </h1>
    <p id="SecondaryPara" class="StdPara"
     title="Secondary-Paragraph">
     More Text
    </p>
    <h1 id="ThirdHeader" class="SubHead"
     title="Sub-Header Secondary">
     Another Heading Still
    </h1>
    <p id="SecondaryPara" class="StdPara"
     title="Secondary Sub-Paragraph">
     Still More Text
    </p>
    <p id="SecondaryPara" class="SubPara"
     title="Sub-Paragraph" lang="en-us">
     Even More Text
    </p>

    This code simply adds tags in specific arrangements so that you can test the various selectors. If you open the resulting file now, you see that each of the <h1> and <p> tags has been automatically formatted like the original <h1> and <p> tags; the result is similar to this:

    image0.jpg
  4. Open ExternalCSS.CSS.

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

    .SubHead
    {
     border: double;
     border-width: thick;
     border-color: Green;
    }
  6. Reload the test page.

    You see the effect of making the style change. Each object that has a class value of SubHead now has a thick double border colored green.

    image1.jpg

    There are many ways to define the colors you want to use. Many developers use the hexadecimal format shown so far because it’s precise and flexible. However, #008000 is a little hard to read. Using the color name, Green, is a lot easier. Of course, this means you need to know the name of the color. Fortunately, you can find a list of names that browsers understand at w3schools.com.

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

    #ThirdHeader
    {
     text-decoration: line-through;
    }
  8. Reload the test page.

    You see the effect of making the style change. Each object that has an id value of ThirdHeader now has a text-decoration value of line-through, rather than underline. Notice that the new value overwrites the old value. If you want to preserve the original value, you must specify it again.

    image2.jpg
  9. Type the following code after the existing styles and save the changes to disk.

    [title|="Sub"]
    {
     text-align: right;
     background-color: rgb(128, 255, 128);
    }
  10. Reload the test page.

    You see the effect of making the style change. Each object that has the word Sub somewhere in its title attribute is changed. Notice that this particular change affects both <p> and <h1> tags. This example also shows another way to define color selections. Each color: red, green, blue (rgb) is represented by a value between 0 and 255.

    You can read more about the rgb() approach to creating colors at w3schools.com.

    image3.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.