Precedence, the universal selector & the child combinator
I have been looking over some CSS code, part of a template package for phpBB, in order to make some modifications and I've encountered something I don't fully understand.
What exactly is the CSS author doing here?
html>body {
background: url(images/space_bk.gif) fixed #000;
margin: 0px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif; }
* html body {
background: url(images/earth_bk1.jpg) no-repeat fixed #000;;
margin: 0px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif; }
According to what I've read, the style set determined by html>body will have an effect only if the body tag comes immediately after the html tag (due to the child combinator, >).
The second style set, * html body, doesn't make much sense to me, since the * (asterisk) acts like a wild-card (universal selector), or at least that's how I understand it.
This pattern is repeated throughout the CSS file, for instance
html>body td.cat { background: url(images/fade_back3.png); height: 24px;}
* html body td.cat { background: url(images/fade_back3.gif); height: 18px;}
and it appears to me as though the intent is to provide some kind of conditional styling. I am too much of a rookie, however, to figure out what's going on.
Would someone please school me?
RangerLord posted this at 01:35 — 9th July 2006.
They have: 33 posts
Joined: Aug 2005
(See previous post) No help, anyone?
teammatt3 posted this at 16:43 — 9th July 2006.
He has: 2,102 posts
Joined: Sep 2003
I can't help you there, RangerLord. But have you tried the offical PHPbb forums at http://www.phpbb.com/phpBB/ ? I think they would have a better understanding of PHPbb then us.
RangerLord posted this at 19:33 — 10th July 2006.
They have: 33 posts
Joined: Aug 2005
True enough about the forum software itself, but like a lot of software that supports alternative skins, phpBB doesn't provide support for third-party developed templates.
I have followed the link provided by the developer of the template I am using, but it links back to his blog, and there is no mention of any support for the phpBB template. Also missing is any e-mail link, so in order to ask for help from the author I guess I'll just have to post a comment in his blog.
Meanwhile, I've been through the CSS provided with the default template, as well as another template that I've downloaded, and none of them are doing anything like what I'm seeing in this one.
I would just go find another template that I like, only this one had a theme and layout practically perfect for what I wanted, and all I wanted to change on it was one of the background images, plus add a menu link back to the other part of the website.
- R/L
RangerLord posted this at 19:48 — 10th July 2006.
They have: 33 posts
Joined: Aug 2005
Here is the section of style.css where I want to change the background image, and I'm trying to understand the precedence of the CSS code. I want to replace earth_bk.jpg with alternate_bk.jpg while leaving space_bk.gif which tiles across the rest of the background. For testing, I have the code in the following configuration for now. Both Netscape and Firefox display the forum with the file alternate_bk.jpg in the upper left corner and the rest of the background tiled with space_bk.gif, while Internet Exploder still displays earth_bk.jpg in the upper left with the tiled space_bk.gif.
I'm simply trying to understand how this code is being interpreted so I can make the changes I want and know that they're dependable.
html>body {
background: url(images/space_bk.gif) fixed #000;
margin: 0px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif; }
* html body {
background: url(images/earth_bk1.jpg) no-repeat fixed #000;;
margin: 0px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif; }
a, a:visited {
color: #b7bfda; }
a:hover {
color: #F7BC5B; }
html>body #container {
width: 735px;
background: url(images/alternate_bk.jpg) no-repeat fixed;
padding-top: 25px;
padding-left: 15px;}
* html body #container {
width: 735px;
padding-top: 25px;
padding-left: 15px;}
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.