Home/ Questions/Q 637235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:36:07+00:00

I am trying to do the tutorial in Chapter 6 of the 2nd edition

  • 0

I am trying to do the tutorial in Chapter 6 of the 2nd edition of “CSS: The Missing Manual”, and I’ve run into an issue I’m trying to understand.

I have one style that looks like this:

#main p:first-line {
    color: #999999;
    font-weight: bold;
}

Later I have another style that looks like this:

#main p.byline {
    color: #00994D !important;
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
}

I am confused because the second one won’t override the color choice in the first one despite the fact that the second one has “!important” in it. I put both classes into an online specificity calculator, and the second one comes out being more specific, so I’m doubly confused.

By the way, the inclusion of “!important” is the work-around suggested in the errata for the book. Odd that it still doesn’t work!

Here’s the code for the entire page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Typography</title>
<style type="text/css">
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
    padding: 0;
     margin: 0;
     font-size: 100%;
     font-weight: normal;
    }
    table { border-collapse: collapse; border-spacing: 0; }
    td, th, caption { font-weight: normal; text-align: left; }
    img, fieldset { border: 0; }
    ol { padding-left: 1.4em; list-style: decimal; }
    ul { padding-left: 1.4em; list-style:square; }
    q:before, q:after { content:''; }

body {
    color: #002D4B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%
}

#main h1 {
    color: #F60;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 4em;
}
#main h2 {
    font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
    border-bottom: 1px solid #002D4B;
    margin-top: 25px;
}
#main h3 {
    color: #F60;
    font-size: 1.9em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 25px;
    margin-bottom: 10px;
}
#main p {
    font-size: 1.5em;
    line-height: 150%;
    margin-left: 150px;
    margin-right: 50px;
    margin-bottom: 10px;
}
#main p:first-line {
    color: #999999;
    font-weight: bold;
}
#main ul {
    margin: 50px 0 25px 50px;
    width: 150px;
    float: right;
}
#main li {
    color: #207EBF;
    font-size: 1.5em;
    margin-bottom: 7px;
}
#main p.byline {
    color: #00994D !important;
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
}

#main .byline strong { color: #207EBF; text-transform: uppercase; margin-left: 5px;
}

</style>
</head>

<body>
<div id="main">
<h1><strong>CSS</strong> The Missing Manual</h1>
<h2>Exploring Typographic Possibilities</h2>
<p class="byline">november 30 <strong>Rod Dibble</strong></p>
<ul>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
  <li>Lorem Ipsum</li>
  <li>Reprehenderit qui in ea</li>
</ul>
<h3>Esse quam nulla</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h3>Quis autem vel eum</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</body>
</html>

Here is the above code on JSBin: http://jsbin.com/unexe3

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The !important property is being applied to .byline, but you don’t have enough content in the paragraph to realize it (it isn’t being applied to the first line). The #main p:first-line selector is more specific to the first line of the element than #main p.byline. You can fix it pretty easily by changing the first-line selector to only apply to paragraph elements that follow h3 elements.

    #main h3+p:first-line
{
    color: #999999;
    font-weight: bold;
}

    Also, the specificity calculator was probably not completely accurate because :first-line isn’t a real element, but a pseudo-element. Smashing Magazine has a nice article on Advanced CSS Selectors.

    • 0