Lecture 21: CSS2 Selectors

Overview:

  1. Considerations with CSS2 Selectors
  2. Exploring the Selectors
  3. Code Examples

Considerations with CSS2 Selectors

Exploring the Selectors

Selector Usage and Effect Syntax
Universal Matches any element (it is a wildcard).

This is the one CSS2 selector supported by Windows IE 5.x and 6.

Note that the universal selector is unique among selectors in having a specificity of 0 in the cascade. 		* {font-size: 12px;}

The above code would render every element on the page as 12px font-size.
Child Indicates a parent>child relationship that your (X)HTML code must then match.

This has no impact on specificity.		 p>strong {font-style: italic;}

The above code would render every <strong> with a parent of <p> as italic.
Direct Adjacent Indicates a sibling relationship that your (X)HTML code must then match; the siblings must be immediate and share the same parent.

This has no impact on specificity.

IE 7 has a bug that results in the CSS not being applied if an (X)HTML comment exists in your structural code between the two elements.		 td+td {background: #000; color: #fff;}

The first table data cell would not be styled, but the next table data cell (and subsequent cells) would receive the black background and white text color.
Attribute Styles elements based on their attributes and the values of those attributes.

The specificity of attribute selectors is 10.		 div[class] {font-size: 14px;}

Every <div> with a class attribute specified will have 14px text.

div[class="test"] {font-size: 16px;}

Every <div> with a class of "test" will have 16px text.

div[class~="test"] {font-size: 16px;}

The ~ indicates that the value must be part of a space-separated sequence of values, so in this case "test" must be one of the classes specified in a multi-class specification, such as <div class="test example">. It can appear anywhere in the sequence.

div[lang|="en"] {font-size: 18px;}

The | indicates that the value must be the start of a hyphen-separated value for that attribute. Used primarily for xml:lang and lang attributes and matching their language subcodes.

For example, the above code would match the "en" as well as the "en-us" and "en-gb" values in the lang attribute.

div[class="example"][id] {background: #eee; color: #000;}

This example shows that attribute selectors can be combined. Divisions with class="example" as well as an id attribute would have a gray background and black text.

Note: You can use single or no quotes around the value (e.g., div[class='example'], if desired.

Code Examples

Code Example 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Universal Selector</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    * html {font-style: italic;} /* only for Windows IE 5.x and 6 */
    * {margin: 0; padding: 0;} /* global white space reset */
    --></style>
</head>
<body>

<p>This content should be italicized in Windows/Mac IE 5.x and
Windows IE 6, because only those browsers consider there to be an element
outside of &lt;html&gt;.  Other browsers view that rule to be invalid (or at
least do not see how it could work) so they ignore it.</p>

<p>The global white space reset should have eliminated default
spacing for all elements in all browsers.</p>

</body>
</html>

See how this example renders

Code Example 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Child Selector</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    html>body {font: 16px verdana,geneva,lucida,arial,sans-serif;}
    div>span {font-variant: small-caps;}
    --></style>
</head>
<body>

<div>This content should be <span>small-caps</span> because its span
is a child of the parent division, while for
<strong><span>this text</span></strong> there should not be any
small-caps display because its span is a descendant, not a child.</div>

</body>
</html>

See how this example renders

Code Example 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Adjacent Selector</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    ul li+li {font-size: 16px;}
    ol li+li+li {font-size: 18px;}
    --></style>
</head>
<body>

<ul>
    <li>This should be 12px, since it is the first list item</li>
    <li>This should be 16px; it has an adjacent, preceding list item</li>
    <li>This should be 16px; it has an adjacent, preceding list item</li>
    <li>This should be 16px; it has an adjacent, preceding list item</li>
    <li>This should be 16px; it has an adjacent, preceding list item</li>
</ul>

<ol>
    <li>This should be 12px, since it is the first list item</li>
    <li>This should be 12px, since it only has one adjacent list
        item preceding it</li>
    <li>This should be 18px; it has two adjacent, preceding list items</li>
    <li>This should be 18px; it has two adjacent, preceding list items</li>
    <li>This should be 18px; it has two adjacent, preceding list items</li>
</ol>

</body>
</html>

See how this example renders

Code Example 4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Attribute Selector</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    span {font-style: italic;}
    span[title] {cursor: help;}
    p[class="gray"] {background: #ccc; color: #fff; padding: 10px;}
    --></style>
</head>
<body>

<p class="gray"><span>This text is just italic</span> while
<span title="This tooltip should have a help cursor">this text has
some title text</span> and is also italicized.</p>

<p class="notgray">This paragraph should not have a background color
because its class is not "gray".</p>

</body>
</html>

See how this example renders