Trying to understand complex CSS selectors 1

[mmerlinn]

First, I am new to CSS, so any links and/or explanations must be simple for simple-minded people like me. I have searched W3C, and although they do explain class selectors, they do not come close to answering my questions. So far, I have not found anyplace else that does.

In the code below, exactly how does the RED code work? I know it has something to do with multiple selectors, but have no idea how they work together and W3C does not tell me.

[b][COLOR=blue].book {
    width: 952px;
    height: 640px;
    background-image: url(..//images/dialog/book/container.png);
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -485px;
    z-index: 1;
}

[COLOR=red].book.building .remDataBuildingType .building .info .production ul li,
.book.building .productionTree ul li[/color] {
    line-height: 3em;
    clear: both;
    padding: 0px 0px 0px 10px;
}[/color][/b]

The .book function is the only function I could find in the CSS file. .building, .icon, .productionTree, etc do not exist in the CSS file.

Any simple explanation or pointers to a simple explanation are greatly appreciated.

**********

On an unrelated note, I hate this new submission text box. I can type 3 times faster than the text box can process what I type. Every 4 words or so I must wait until the text box displays what I have typed. It reminds me of when I was online with a 300 baud modem some 20 years ago - type - wait forever - type - wait forever - etc. The old submission text box display was almost instantaneous.

mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond

 

[audiopro]

I see 'position: absolute' in your code and straight away, alarm bells start ringing. What exactly are you trying to do with that code?

The submission box is probably a victim of the latest trend in webpages where the content loads straight away and then the adverts, promo rubbish and links to sites offering a solution to falling out of bed, take an age to load. Development of the interweb is slowly going backwards.

Keith

http://www.studiosoft.co.uk

 

[vacunita]

[b][COLOR=#5C3566].book.building .remDataBuildingType .building .info .production ul li[/color][/b],
[COLOR=#4E9A06].book.building .productionTree ul li[/color] {

Basically what that code is saying is:
Apply these stylings to

1. a li element that is inside a ul element that is inside an element with a class of .produccion that is inside an element with a class of info that is inside an element with a class of building that is inside an element with a class of .remDataBuildingType that is inside an element with the classes building and book

and to

2. a li element that is inside a ul element that is inside an element with a class of .production tree which is inside with an element with classes .book and .building.

In essence the html would look something like this:

[oode]

<div class="book building">
[tab]<div class="remDataBuildingType">
[tab][tab]<div class="building">
[tab][tab][tab]<div class="info">
[tab][tab][tab][tab]<div class="production">
[tab][tab][tab][tab][tab]<ul>
[tab][tab][tab][tab][tab][tab]<li> ...</li>
[tab][tab][tab][tab][tab]</ul>
[tab][tab][tab][tab]</div>
[tab][tab][tab]</div>
[tab][tab]</div>
[tab]</div>
</div>


and

<div class="book building">
[tab]<div class="productionTree">
[tab][tab]<ul>
[tab][tab][tab]<li> ...</li>
[tab][tab]</ul>
[tab]</div>
</div>

[/code]

The inner classes could be applied to any type of element. such as a span or p tag. The importance is the order. for simpleness sake I just used divs.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vacunita]

And just to clarify these aren't functions these are merely class names. You can create any class name you want. classnames are not determined by the CSS spec. CSS is very customizable.

The .book selector is merely a class name. It can be anything you want really. unless you are talking about html elements like just the word book rather than the class .book (notice the period) classes are up to the developers wishes and or needs.

With that said, I'm not sure what you are talking about regarding the submission text box.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[mmerlinn]

audiopro:

I see 'position: absolute' in your code and straight away, alarm bells start ringing. What exactly are you trying to do with that code?

It is not my code. I have inherited a massive CSS file (almost half a megabyte, more than 5 times larger than the associated HTML source code) that I need to understand how it works before I can do anything with it.

The submission box is probably a victim of the latest trend in webpages where the content loads straight away and then the adverts, promo rubbish and links to sites offering a solution to falling out of bed, take an age to load. Development of the interweb is slowly going backwards.

Just another example of fixing items that are not broken. My main free email provider (fastmail) fixed what was not broken several years ago. Now fastmail does not work on many of my computers at all and on the rest it is slower by a factor of ten. Hotmail did the same thing years ago (the reason I migrated to fastmail), and for years I could not use Hotmail. A few months ago, Hotmail again started working on my all of my computers as they have reverted some of their changes.

vacunita:

Thanks. That looks simple enough for me to understand. I won't have time for the next few weeks to pursue this further, but when I do, I am sure I will be back with more questions.



mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond