Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Order of interpretation (couldn't spell presidence)

Status
Not open for further replies.

edpatterson

IS-IT--Management
Feb 24, 2005
186
0
0
I am learning/trying to learn CSS from a book, Beginning CSS Web Development ... It eludes to the following
Code:
/* I saved this as container.css */
/* Define styling of our reusable box */
.box {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}
/* Make text red only for paragraphs within the box class */
.box p {
  color: #F00;
}/* Container holds all visible page elements */
#container {
  padding: 20px;
  border: 1px solid #000;
  background: #CCC;
}
/* Make text gray only for paragraphs within the container */
#container p {
  color: #333;
}
Then if offers the following html example to make use of the css, I saved as container.html
Code:
<html>
<head>
  <title>Container Example</title>
    <style type="text/css">@import url("css/container.css");</style>
</head>
<body>
<div id="container">
  Content
  <div class="box">
    <p>I'm in a box</p>
  </div>
  <div class="box">
    <p>I'm also in a box</p>
  </div>
</div>
<div class="box>
  <p>I'm also in a box!
  </p>
</div>
</body>
</html>
Only the text not within the container is red. The book stated that all of the text within the boxes would be red. and only the text directly in the container would be dark gray.

I am using Firefox 3.0.10 on a Ubuntu 9.04 machine, pages being served by Apache 2 if any of that matters.

It seems to me that since I am using 'box' within the 'container' that the 'box p' would be the one that wins out.

In fairness to the author of the book, the above is not an actual code sample, but since actual 'enter this/see that' examples are basically non-existent, I am making my own samples.

For those with access to the book, I am refering to pages 42 and 43.

Thanks
 
Hi

patterson said:
It seems to me that since I am using 'box' within the 'container' that the 'box p' would be the one that wins out.
Nope. The specificity of the style specified for an [tt]id[/tt] is higher. See Calculating a selector's specificity. If the "container" would be [tt]class[/tt], not [tt]id[/tt], then yes, all box texts would be red.

Feherke.
 
precedence (same root as precede)

A humorous (but still correct) look at specificity: CSS: Specificity Wars




Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top