Lecture 23: Pseudo-Elements, Generated Content, and Additional Pseudo-Classes

Overview:

  1. :first-letter and :first-line Pseudo-Elements
  2. :before and :after Pseudo-Elements for Generated Content
  3. ::selection Pseudo-Element
  4. :root Pseudo-Element
  5. :first-child and :last-child Pseudo-Classes
  6. :not and :empty Pseudo-Classes
  7. :lang Pseudo-Class
  8. :target Pseudo-Class
  9. :only-child Pseudo-Class
  10. Combining Dynamic Pseudo-Classes

:first-letter and :first-line Pseudo-Elements

Pseudo-Element Usage and Effect Properties Accepted Supported By
:first-letter Styles the first letter in the indicated selector. background-related properties | border-related properties | color | clear (covered in INP 170: Web Coding II) | float (covered in INP 170: Web Coding II) | font-related properties | line-height | margin properties | padding properties | text-decoration | text-transform | vertical-align (if not floated) Windows IE 5.01 and earlier browsers lack support (for the most part); Windows IE 5.5 and later browsers have support. Mac IE 5.x is supportive.
:first-line Styles the first line of content in the indicated selector. background-related properties | color | clear (covered in INP 170: Web Coding II) | font-related properties | letter-spacing | line-height | text-decoration | text-transform | vertical-align word-spacing Windows IE 5.01 and earlier browsers lack support (for the most part); Windows IE 5.5 and later browsers have support. Mac IE 5.x is supportive.

Sample code:

<!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: First-Letter and First-Line</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, h2 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px;}
    h2 {font-size: 14px;}
    h1:first-letter {font-size: 24px;}
    .color:first-letter {color: white; background: #000; font-size: 18px;}
    p:first-line {font-style: italic;}
    p:first-letter {font-weight: bold;}
    --></style>
</head>
<body>

<h1>Sample Level 1 heading with :first-letter styling on the
element</h1>

<p>A sample paragraph with enough content that it should eventually
wrap to two lines when the window is sized appropriately. A sample
paragraph with enough content that it should eventually wrap to two
lines when the window is sized appropriately.</p>

<h2 class="color">Sample Level 2 heading, using a class and
:first-letter</h2>

<p>Another example of a paragraph that will use the first-line styling.
Additional text in order to force wrapping. Additional text in order to
force wrapping. Additional text in order to force wrapping. Additional text
in order to force wrapping.</p>
</body>
</html>

See how this example renders

:before and :after Pseudo-Elements for Generated Content

Pseudo-Element or Property Usage and Effect Properties / Values Accepted Supported By
:after Inserts the indicated content after the selector's content. CSS properties, most importantly the 'content' property Gecko-based browsers, Safari, and Opera.

Internet Explorer lacks support.
:before Inserts the indicated content before the selector's content. CSS properties, most importantly the 'content' property Gecko-based browsers, Safari, and Opera.

Internet Explorer lacks support.
content Specifies content to insert either :before or :after Text string surrounded by quotes | images brought in via url() | attribute values via attr() | keyword defined elements (used with the quotes property and accepts values of 'open-quote', 'close-quote', 'no-open-quote', and 'no-close-quote') | counters Gecko-based browsers, Safari, and Opera.

Internet Explorer lacks support.

Mozilla does not support counters.

Sample code using images:

<!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: Generated Content 1</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;}
    p:before {content: url(content-arrow.gif);}
    --></style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>

See how this example renders

Sample code using text string output and counters:

<!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: Generated Content 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1 {font: 12px verdana,geneva,lucida,arial,sans-serif;}

    /* need to put the counter-increment in the tag, not the :before
       for it to work in Firefox; by default it increments by 1
       so it is not essential to specify that */
    h1 {font-size: 16px; counter-increment: paper 1;}

    h1:before {content: counter(paper) ". ";}

    .paper:after {
       font-style: oblique;
       content: " Copyright: Web Design Associates.";
       }
    --></style>
</head>
<body>
<h1>White Paper Title</h1>
<div class="paper">A description of the white paper.</div>

<h1>White Paper Title</h1>
<div class="paper">A description of the white paper.</div>

<h1>White Paper Title</h1>
<div class="paper">A description of the white paper.</div>
</body>
</html>

See how this example renders

Sample code using attribute output:

<!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: Generated Content 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    ul {margin-bottom: 50px;}
    #version1 a:after {content: " - " attr(href);}
    #version1 li:after {content: " (" attr(title) ")";}
    #version2 a:after {
        content: " (" attr(href) " - " attr(title) ")";
    }
    --></style>
</head>
<body>
<h1>Links of Interest, Version 1:</h1>
<ul id="version1">
    <li title="Web Search Engine">
      <a href="http://www.google.com">Google</a>
    </li>
    <li title="Job Listings">
      <a href="http://www.monster.com">Monster</a>
    </li>
    <li title="Technology News">
      <a href="http://www.news.com">CNET</a>
    </li>
</ul>

<h1>Links of Interest, Version 2:</h1>
<ul id="version2">
    <li><a href="http://www.google.com"
      title="Web Search Engine">Google</a>
    </li>
    <li><a href="http://www.monster.com"
      title="Job Listings">Monster</a>
    </li>
    <li>
      <a href="http://www.news.com"
      title="Technology News">CNET</a>
    </li>
</ul>

</body>
</html>

See how this example renders

Sample code using quotes:

<!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: Generated Content 4</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;}
    /* with quotes the first set of values are outer open/closed, then
       the next set are the nested open/closed quotations to use */
    q:lang(en) {quotes: '"' '"' "'" "'";}
    q:lang(fr) {quotes: "<<" ">>" "<" ">";}
    q:before {content: open-quote;}
    q:after {content: close-quote;}
    --></style>
</head>
<body>
<p><em>English version of quotes:</em><br />
<q>A quotation <q>and a nested quotation</q> to show the quotes
property.</q></p>

<p><em>French version of quotes (not a perfect match):</em><br />
<q lang="fr">A quotation <q lang="fr">and a nested quotation</q> to show
the quotes property.</q></p>

</body>
</html>

See how this example renders

::selection Pseudo-Element

Sample code:

<!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: Selection</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;}
    ::selection {background: green; color: #fff;}
    ::-moz-selection {background: green; color: #fff;}
    div::selection {background: yellow; color: #000;}
    div::-moz-selection {background: yellow; color: #000;}
    --></style>
</head>
<body>
<p>This text should be white text on a green background when it is
selected</p>

<div>This text, however, should be black text on a yellow background
because the div selections are styled differently.</div>
</body>
</html>

See how this example renders

:root Pseudo-Element

Sample code:

<!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: Root</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    :root {background: green; padding: 35px;}
    body {background: #fff; color: #000;}
    --></style>
</head>
<body>
<p>In supportive browsers, the rest of the page should be green and
there should be noticeable padding on all sides.</p>
</body>
</html>

See how this example renders

:first-child and :last-child Pseudo-Classes

Sample code:

<!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: First-Child and Last-Child</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;}
    strong:first-child {font-style: italic;}
    span:last-child {font-variant: small-caps;}
    .example:first-child {font-weight: bold;}
    .example:last-child {color: red; background: #fff;}
    --></style>
</head>
<body>
<p>In this paragraph the first child is <strong>strong text that will
also italicize</strong>, while the next <strong>strong text will not be
italicized</strong> and then the final <span>tagged content will be in
small-caps text</span>.</p>

<p>We have <span class="example">some bold text</span>, other text
<span class="example">with no styling</span>, and then some <span
class="example">red text that is small-caps</span>.</p>

<p>And then a paragraph with <span class="example">one child</span>.</p>
</body>
</html>

See how this example renders

:not and :empty Pseudo-Classes

Sample code for the :not pseudo-class:

<!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: The :Not Pseudo-Class</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body :not(.normal) {font-style: oblique;}
    --></style>
</head>
<body>
<p class="normal">Text inside an element with class="normal".</p>

<p>All content not inside an element with class="normal" will render
as oblique text.</p>
</body>
</html>

See how this example renders

Sample code for the :empty pseudo-class:

<!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: The Empty Pseudo-Class</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;}
    p:empty {border: 6px double #000;}
    --></style>
</head>
<body>
<p></p>
<p>This paragraph is not empty.</p>
<p></p>
</body>
</html>

See how this example renders

:lang Pseudo-Class

Sample code:

<!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: Lang</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;}
    :lang(de) {background: #000; color: #fff; font-weight: bold;}
    --></style>
</head>
<body>
<p>A German greeting: <span lang="de">Guten Tag!</span></p>
</body>
</html>

See how this example renders

:target Pseudo-Class

Sample code:

<!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: Target</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 20px;}
    a:target {color: #fff; background: #000; font-style: oblique;
              padding: 5px;}
    .height200 {height: 200px;}
    --></style>
</head>
<body>
    <p>
    On This Page:<br />
    <a href="#section1">Section 1</a><br />
    <a href="#section2">Section 2</a><br />
    <a href="#section3">Section 3</a>
    </p>

    <div class="height200"></div>

    <h1><a name="section1">Section 1</a></h1>

    <div class="height200"></div>

    <h1><a name="section2">Section 2</a></h1>

    <div class="height200"></div>

    <h1><a name="section3">Section 3</a></h1>
</body>
</html>

See how this example renders

:only-child Pseudo-Class

Sample code:

<!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: Only-Child</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;}
    em:only-child {font-weight: bold;}
    --></style>
</head>
<body>
<p>This <em>emphasized text</em> has its default appearance as well as a
bold font-weight, because it is the only child of its parent.</p>

<p>This <em>emphasized text</em> only shows its default appearance and
does not pick up the bold font-weight because there is also some
<span>spanned content</span> that has the same parent.</p>
</body>
</html>

See how this example renders

Combining Dynamic Pseudo-Classes

Sample code for multiple dynamic pseudo-classes (tabindex was added so that Opera would tab to the link):

<!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: Multiple Dynamic Pseudo-Classes</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;}
    a:hover {text-decoration: none;}
    a:focus {border: 2px solid #000;}
    a:hover:focus {background: #000; color: #fff;}
    --></style>
</head>
<body>
<p>A <a href="http://www.google.com" tabindex="1">link to Google</a>.</p>
</body>
</html>

See how this example renders

Sample code for multiple classes:

<!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: Multiple Classes</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;}
    .ctr {text-align: center;}
    .padding20 {padding: 20px;}
    .ctr.padding20 {background: #000; color: #fff;}
    --></style>
</head>
<body>
<p class="ctr padding20">Centered white text on a black background.</p>

<p class="ctr">Text that is just centered.</p>

<p class="padding20 ctr">Centered white text on a black background.</p>
</body>
</html>

See how this example renders