This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Targeting selectors to accomplish precise tasks (part 1)

Assume the following markup, which cannot be changed in any way:

Example 1:
To put a border around the "rant" use:

div.rant {border : thin solid #000000;}

This selects any division with a class that contains the word "rant" and gives it a thin solid black border.

• A page that demonstrates the rendering of the example 1 selector and declaration
• An illustration of what example 1 is targeting in the document tree

Example 2:
To italicize all of the em elements found in the "rant" use:

div.rant * em {font-style: italic;}

This selects any em element that is a descendant of any element that is a descendant of a division with a class attribute that contains the word "rant". and makes the text italic.

• A page that demonstrates the rendering of the example 2 selector and declaration
• An illustration of what example 2 is targeting in the document tree

Example 3:
To make the word "really" in "really lame" red use:

div.rant p + ul > li > em {color : #ff0000;}

• A page that demonstrates the rendering of the example 3 selector and declaration
• An illustration of what example 3 is targeting in the document tree

Example 4:
To underline the word "there" in "So there" use:

div.rant > ul + p + p > em {text-decoration: underline;}

This selects any em that is a child of a paragraph that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) an unordered list that is a child of a division with a class that contains the word "rant" and makes the text underlined.

• A page that demonstrates the rendering of the example 4 selector and declaration
• An illustration of what example 4 is targeting in the document tree

Example 5:
To boldface the mailto: link near the end of the page use:

h1 + p + ul + div.rant + p > a {font-weight: bold;}

• A page that demonstrates the rendering of the example 5 selector and declaration
• An illustration of what example 5 is targeting in the document tree

Example 6:
To boldface the paragraph "Have a nice day!" use:

h1 + p + ul + div.rant + p + p {font-weight: bold;}

This selects any paragraph that immediately follows a paragraph that immediately follows (is sibling to) a division with a class that contains the word "rant" that immediately follows (is sibling to) an unordered list that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) a heading 1 element and makes it bold.

• A page that demonstrates the rendering of the example 6 selector and declaration
• An illustration of what example 6 is targeting in the document tree

Example 7:
To set a left margin of 1.5em for the sub-category lists for both pictures and poetry use:

ul > li > ul li {margin-left: 1.5em;}

This selects any list item that is a descendant of an unordered list that is a child of a list item that is a child of an unordered list element and sets a left margin of 1.5em.

• A page that demonstrates the rendering of the example 7 selector and declaration
• An illustration of what example 7 is targeting in the document tree

Example 8:
To set a left margin of 2em for only the poetry sub-category list use:

ul > li + li > ul {margin-left: 2em;}

This selects any unordered list that is a child of a list item that immediately follows (is sibling to) a list item that is a child of an unordered list and sets a left margin of 2em.

• A page that demonstrates the rendering of the example 8 selector and declaration
• An illustration of what example 8 is targeting in the document tree

Example 9:
To uppercase the word "beer" use:

ul > li > ul > li + li + li > a {text-transform: uppercase;}

This selects any a element that is a child of a list item that immediately follows (is sibling to) a list item that immediately follows (is sibling to) a list item that is a child of an unordered list that is a child of a list item that is a child of an unordered list and transforms the text to uppercase.

• A page that demonstrates the rendering of the example 9 selector and declaration
• An illustration of what example 9 is targeting in the document tree

Example 10:
Set a square bullet for the last three category list items near the beginning of the page, without having that change carry into the sub-category lists.

body > ul > li + li {list-style-type: square;}

This selects any list item that immediately follows a list item that is a child of an unordered list that is a child of a body element and sets the list style type to square.

• A page that demonstrates the rendering of the example 10 selector and declaration
• An illustration of what example 10 is targeting in the document tree

---

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2002
Page URL: http:// www.d.umn.edu /~lcarlson/csswork/selectors/tasks.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.