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 Pattern Selectors

In some cases, a selection you need to make in CSS3 has nothing to do with either tags or attributes, but the pattern in which the objects appear on the page. For example, you might want to select just the first object, regardless of what that object might be.

In some cases, you want to format with alternate members of a list or other repetitive data element in some manner to make it easier for the user to see each element individually. The following list tells you about pattern selectors that documents commonly use.

  • :first-letter: Select the first letter of the specified object. This selector is useful in creating special textual effects, such as drop caps.

    It’s extremely rare to see most pattern selectors used alone because you normally don’t want to specially format just the first letter of every object on the page in a certain way. Generally, you see pattern selectors used in combination with an attribute selector, such as the class selector, or with a particular tag selector.

    Using pattern selectors globally can have unexpected results or even cause an application to fail (depending on how the application’s code and the CSS interact).

  • :first-line: Selects the first line of the specified object.

  • :before: Selects the area immediately before the specified object content. This selector is normally coupled with the content property to insert something special before the content in the existing object.

  • :after: Selects the area immediately after the specified object content. This selector is normally coupled with the content property to insert something special before the content in the existing object.

  • :first-of-type: Selects the first object of a specific type.

    Even though the specification doesn’t actually tell you that you must provide a type or a parent, some pattern selectors won’t work without one. Typically you see the :first-of-type selector used with a tag selector, (for example, p:first-of-type), but it can also be used with an attribute selector. All of the other type and child pattern selectors work the same way.

  • :last-of-type: Selects the last object of a specific type.

  • :only-of-type: Selects the only object of a specific type. If there’s more than one object of a particular type, then no selection is made.

  • :nth-of-type(Number): Selects the specified object of a specific type.

  • :nth-last-of-type(Number): Selects the specified object of a specific type, beginning from the end of the object list.

  • :first-child: Selects the first child of a specified object. This selector is commonly used to apply special formatting to the first item in a list or table.

  • :last-child: Selects the last child of a particular parent.

  • :only-child: Selects the only child of a particular parent. When a parent object has more than one child, no selection is made.

  • :nth-child(Number): Selects the specified child of a particular parent.

  • :nth-last-child(Number): Selects the specified child of a particular parent beginning from the end of the list of children.

Pattern selectors can create some interesting effects on your site. The following procedure takes a quick look at what these selectors can do. It’s important to remember that you’ll see selectors, including pattern selectors, frequently, so consider this a starting point.

  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.

    <ul id="MyList">
     <li id="One" class="ListItem">One</li>
     <li id="Two" class="ListItem">Two</li>
     <li id="Three" class="ListItem">Three</li>
     <li id="Four" class="ListItem">Four</li>
     <li id="Five" class="ListItem">Five</li>
    </ul>

    In this case, you add a list to the page to allow easier detection of patterns. Of course, patterns aren’t limited to lists or tables. You can use them with any arrangement of objects that could lend themselves to selection by a pattern.

  4. Open ExternalCSS.CSS.

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

    .ListItem:first-letter
    {
     font-size: xx-large;
    }
    .ListItem:after
    {
     content: " \27A8";
     font-size: x-large;
     color: Red;
    }
    .ListItem:nth-child(odd)
    {
     background-color: LightBlue;
    }
    .ListItem:nth-child(2n+2)
    {
     background-color: LightGreen;
    }
  6. Reload the test page.

    You see the effect of making the style change. To begin, each bullet starts with an extra-large letter.

    image0.jpg

    At the end of each bullet you see a special arrow character. Notice how the CSS uses \27A8 to create this character. When viewing charts such as the one at ikreator.com and the one at petterhesselberg.com, you see these character codes presented with a &# combination at the beginning. CSS uses the same numeric codes, but relies on a backslash (/).

    The :nth-child() selector can be used in a number of ways. Even though the example doesn’t show it, you can provide a number to select one specific child element. However, this selector also accepts a number of other interesting inputs. For example, you can use the even and odd keywords to select the even or odd objects in a list.

    You can also provide an equation that uses n to indicate the current object. When the browser inputs 0 for n, for example, the equation becomes 2 * 0 + 2 or element 2. If you wanted to start with element 3 instead, you’d use 2n+3. The equation you provide can be of any complexity required to produce the desired result.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.